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.
- Ruby 2.7 or higher
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"
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 %>
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.
This is the name of the Phosphor Icon you want to use. For example alarm
. Full list of icons
: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.
Once initialized, you can read a few properties from the icon.
Returns the string of the symbol name
icon = PhosphorIcons::Icon.new("alarm")
icon.symbol
# "alarm"
Returns the style of the icon
icon = PhosphorIcons::Icon.new("alarm", style: :bold)
icon.style
# "bold"
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"/>
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 is the icon's true width.
icon = PhosphorIcons::Icon.new("alarm", width: 24)
icon.height
# 24
Height is the icon's true height.
icon = PhosphorIcons::Icon.new("alarm", height: 24)
icon.height
# 24
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>
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.
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.
The gem is available as open source under the terms of the MIT License.
Everyone interacting in the PhosphorIcons project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.