Awesome
<p align="center"> <img src="./social-phosphor-icons.png" width="1280" title="Social Card Ruby Phosphor Icons"> </p>Ruby Phosphor Icons
<a href="https://github.com/maful/ruby-phosphor-icons/actions?query=workflow%3ACI"> <img src="https://github.com/maful/ruby-phosphor-icons/actions/workflows/ci.yml/badge.svg" alt="Tests"> </a> <a href="https://rubygems.org/gems/phosphor_icons"> <img src="https://img.shields.io/gem/v/phosphor_icons" alt="Latest Stable Version"> </a>A gem to easily include Phosphor Icons in your Ruby and Rails apps.
For a full list of available icons see the assets directory or preview them at phosphoricons.com.
Requirements
- Ruby 2.7 or higher
Installation
Install the gem and add to the application's Gemfile by executing:
bundle add phosphor_icons
or add this in your Gemfile
gem "phosphor_icons"
Usage
require "phosphor_icons"
icon = PhosphorIcons::Icon.new("alarm")
icon.to_svg
# <svg class="phosphor-icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24"><path d="M128,32a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,32Zm0,176a80,80,0,1,1,80-80A80.09,80.09,0,0,1,128,208ZM61.66,29.66l-32,32A8,8,0,0,1,18.34,50.34l32-32A8,8,0,1,1,61.66,29.66Zm176,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,237.66,61.66ZM184,120a8,8,0,0,1,0,16H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48Z"/></svg>
If you are using Ruby on Rails, you can use phosphor_icon
helper in your views directly
<%= phosphor_icon "alarm", class: "h-5 w-5" %>
<%= phosphor_icon "x", height: 48 %>
Documentation
The Icon
class takes two arguments. The first is the symbol of the icon, and the second is a hash of arguments representing html attributes.
symbol
(required)
This is the name of the Phosphor Icon you want to use. For example alarm
. Full list of icons
Options
:style
- Apply a specific style to the icon. Available options areregular
(default),bold
,light
,duotone
,fill
andthin
.:height
- When setting the height to a number, the icon will scale to that size. For example, passing24
, will calculate the width based on the icon's natural size.:width
- When setting the width to a number, the icon will scale to that size. For example, passing24
, will calculate the width based on the icon's natural size.
Attributes
Once initialized, you can read a few properties from the icon.
symbol
Returns the string of the symbol name
icon = PhosphorIcons::Icon.new("alarm")
icon.symbol
# "alarm"
style
Returns the style of the icon
icon = PhosphorIcons::Icon.new("alarm", style: :bold)
icon.style
# "bold"
path
Path returns the string representation of the path of the icon.
icon = PhosphorIcons::Icon.new("alarm")
icon.path
# <path d="M128,32a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,32Zm0,176a80,80,0,1,1,80-80A80.09,80.09,0,0,1,128,208ZM61.66,29.66l-32,32A8,8,0,0,1,18.34,50.34l32-32A8,8,0,1,1,61.66,29.66Zm176,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,237.66,61.66ZM184,120a8,8,0,0,1,0,16H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48Z"/>
options
This is a hash of all the options
that will be added to the output tag.
icon = PhosphorIcons::Icon.new("alarm")
icon.options
# {:class=>"phosphor-icon", :viewBox=>"0 0 256 256", :xmlns=>"http://www.w3.org/2000/svg", :fill=>"currentColor", :width=>24, :height=>24}
width
Width is the icon's true width.
icon = PhosphorIcons::Icon.new("alarm", width: 24)
icon.height
# 24
height
Height is the icon's true height.
icon = PhosphorIcons::Icon.new("alarm", height: 24)
icon.height
# 24
Methods
to_svg
Returns a string of the svg tag
icon = PhosphorIcons::Icon.new("alarm")
icon.to_svg
# <svg class="phosphor-icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24"><path d="M128,32a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,32Zm0,176a80,80,0,1,1,80-80A80.09,80.09,0,0,1,128,208ZM61.66,29.66l-32,32A8,8,0,0,1,18.34,50.34l32-32A8,8,0,1,1,61.66,29.66Zm176,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,237.66,61.66ZM184,120a8,8,0,0,1,0,16H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48Z"/></svg>
Development
After checking out the repo, run bin/setup
to install dependencies. Then, run rake test
to run the tests. You can also run bin/console
for an interactive prompt that will allow you to experiment.
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/maful/ruby-phosphor-icons. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.
License
The gem is available as open source under the terms of the MIT License.
Code of Conduct
Everyone interacting in the PhosphorIcons project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.