- Notifications
You must be signed in to change notification settings - Fork6
General icons extension for Phlex. Includes more than 🎨 14,500 icons.
License
AliOsm/phlex-icons
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
General icons extension forPhlex. Includes more than 🎨 14,500 icons from:
- Bootstrap Icons (2,000+)
- Flag Icons (250+)
- Heroicons (300+)
- Lucide Icons (1,500+)
- Material Design Icons (2,100+)
- RadixUI Icons (300+)
- Remix Icons (3,000+)
- Tabler Icons (4,900+)
And happy to extend to other icon packs!
If you don't want to add all icon packs to your application, you can add a specific icon pack by using one (or multiple) of the following gems:
- phlex-icons-bootstrap
- phlex-icons-flag
- phlex-icons-hero
- phlex-icons-lucide
- phlex-icons-material
- phlex-icons-radix
- phlex-icons-remix
- phlex-icons-tabler
Thanksnejdetkadir for creatingPhlex::Heroicons as it was the base for this gem.
Other Phlex icon gems:
Install the gem and add it to the application's Gemfile by executing:
bundle add phlex-icons
If bundler is not being used to manage dependencies, install the gem by executing:
gem install phlex-icons
The gem provides global configuration options, and per icons pack configuration options.
PhlexIcons.configuredo |config|config.default_classes='size-6'config.helper_method_name=:phlex_icon# Default: :phlex_iconconfig.default_pack=:hero# Default: nil. Accepts :symbol, "string", or Class (e.g., PhlexIcons::Hero)end# ORPhlexIcons.configuration.default_classes='size-6'PhlexIcons.configuration.helper_method_name=:phlex_iconPhlexIcons.configuration.default_pack=:hero
Nothing to configure for Bootstrap Icons.
PhlexIcons::Flag.configuredo |config|config.default_variant=:square# or :rectangleend# ORPhlexIcons::Flag.configuration.default_variant=:square# or :rectangle
PhlexIcons::Hero.configuredo |config|config.default_variant=:solid# or :outlineend# ORPhlexIcons::Hero.configuration.default_variant=:solid# or :outline
Nothing to configure for Lucide Icons.
PhlexIcons::Material.configuredo |config|config.default_variant=:filled# or :outlined, :round, :sharp, :two_toneend# ORPhlexIcons::Material.configuration.default_variant=:filled# or :outlined, :round, :sharp, :two_tone
Nothing to configure for RadixUI Icons.
Nothing to configure for Remix Icons.
PhlexIcons::Tabler.configuredo |config|config.default_variant=:outline# or :filledend# ORPhlexIcons::Tabler.configuration.default_variant=:outline# or :filled
require'phlex-icons'# No need to require the gem if you are using it in a Rails application.classPhlexIcons <Phlex::HTMLincludePhlexIconsdefview_templatedivdoBootstrap::House(class:'size-4')Flag::Sa(variant::rectangle,class:'size-4')Hero::Home(variant::solid,class:'size-4')Lucide::House(class:'size-4')Material::House(variant::filled,class:'size-4')Radix::Home(class:'size-4')Remix::HomeLine(class:'size-4')Tabler::Home(variant::filled,class:'size-4')# or with a stringIcon('bootstrap/house',class:'size-4')endendend
require'phlex-icons'# No need to require the gem if you are using it in a Rails application.classPhlexIcons <Phlex::HTMLdefview_templatedivdorenderPhlexIcons::Bootstrap::House.new(class:'size-4')renderPhlexIcons::Flag::Sa.new(variant::rectangle,class:'size-4')renderPhlexIcons::Hero::Home.new(variant::solid,class:'size-4')renderPhlexIcons::Lucide::House.new(class:'size-4')renderPhlexIcons::Material::House.new(variant::filled,class:'size-4')renderPhlexIcons::Radix::Home.new(class:'size-4')renderPhlexIcons::Remix::HomeLine.new(class:'size-4')renderPhlexIcons::Tabler::Home.new(variant::filled,class:'size-4')# or with a stringrenderPhlexIcons::Icon('bootstrap/house',class:'size-4')endendend
phlex-icons provides a convenient helper method to render icons directly in your ERB or Phlex views.
By default, the helper method is namedphlex_icon, but is configurable.
<%# Render a Bootstrap house icon with default size%><%= phlex_icon 'bootstrap/house'%><%# Render a Heroicons solid home icon with a specific class%><%= phlex_icon 'hero/home', variant: :solid, class: 'w-5 h-5 text-blue-500'%><%# Render a Tabler home icon, filled variant%><%= phlex_icon 'tabler/home:filled'%><%# If default_pack = :hero, render a Heroicons home icon%><%= phlex_icon 'home', class: 'w-6 h-6'%><%# Render a Flag icon (rectangle variant is default for flags if not configured otherwise)%><%= phlex_icon 'flag/sa'%><%# Render a custom icon%><%= phlex_icon 'custom/my_awesome_icon:variant_name'%>
The first argument is the icon identifier. Such as:'pack/icon_name:variant'.
- If
default_packis configured, you can omit the pack name (e.g.,'icon_name:variant'instead of'pack/icon_name:variant'). - The
:variantpart is optional. - Examples:
'hero/house:solid','house:solid','house'
Subsequent arguments are passed as options to the icon component, such asvariant,class, etc.
Let's say you want to use only Heroicons and Flag Icons, you can use the following gems:
Then, in your application, you can use the icons like this:
require'phlex-icons-flag'# No need to require the gem if you are using it in a Rails application.require'phlex-icons-hero'# No need to require the gem if you are using it in a Rails application.classPhlexIcons <Phlex::HTMLincludePhlexIcons# If you want to use Phlex::Kit.defview_templatedivdo# With Phlex::Kit.Flag::Sa(variant::rectangle,class:'size-4')Hero::Home(variant::solid,class:'size-4')# Without Phlex::Kit.renderPhlexIcons::Flag::Sa.new(variant::rectangle,class:'size-4')renderPhlexIcons::Hero::Home.new(variant::solid,class:'size-4')endendend
You can extend the gem in your Rails application to add new icons by creating aphlex-icons/custom directory insideviews/components directory. Then, you can create a new component for each icon you want to add. For example:
# app/views/components/phlex-icons/custom/icon_class_name.rbmodulePhlexIconsmoduleCustomclassIconClassName <PhlexIcons::Basedefview_template# SVG code here.endendendend
Finally, you will need to create aPhlexIcons::Custom module inphlex-icons/custom.rb file to include your custom icons and make them aPhlex::Kit:
# app/views/components/phlex-icons/custom.rbmodulePhlexIconsmoduleCustomextendPhlex::Kitendend
Now, you can use your custom icons like any other icon pack as described above.
All icon packs provided in this gem are auto-generated by their generator undergenerators directory. You just need to clone the repo and run the generator for the icon pack you want to update. Also, there is a GitHub Action that will run the generator for all icon packs and update the gem weekly on each Friday.
Each icon pack contains aVERSION constant in its module represents the version of the icon pack used in the gem. So, for example, to get the Bootstrap version used in the gem you can access it byPhlexIcons::Bootstrap::VERSION.
After checking out the repo, open it in VSCode and clickReopen in Container to start a development container. Then, runrake spec to run the tests. You can also runbin/console for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, runbundle exec rake install. To release a new version, update the version number inversion.rb, and then runbundle exec rake release, which will create a git tag for the version, push git commits and the created tag, and push the.gem file torubygems.org.
Bug reports and pull requests are welcome on GitHub athttps://github.com/AliOsm/phlex-icons. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to thecode of conduct.
The gem is available as open source under the terms of theMIT License.
Everyone interacting in the PhlexIcons project's codebases, issue trackers, chat rooms and mailing lists is expected to follow thecode of conduct.
About
General icons extension for Phlex. Includes more than 🎨 14,500 icons.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.