{"id":15603332,"url":"https://github.com/alexwebgr/faw_icon","last_synced_at":"2025-04-24T07:35:37.995Z","repository":{"id":44954975,"uuid":"134584291","full_name":"alexwebgr/faw_icon","owner":"alexwebgr","description":"A simple helper for Font-Awesome 5 using raw SVG and SVG-with-JS","archived":false,"fork":false,"pushed_at":"2023-01-20T07:44:12.000Z","size":33,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-18T06:34:54.701Z","etag":null,"topics":["font-awesome","ruby","ruby-on-rails","svg","view-helpers"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexwebgr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-23T14:47:32.000Z","updated_at":"2023-01-19T10:45:48.000Z","dependencies_parsed_at":"2023-02-12T00:31:25.457Z","dependency_job_id":null,"html_url":"https://github.com/alexwebgr/faw_icon","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexwebgr%2Ffaw_icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexwebgr%2Ffaw_icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexwebgr%2Ffaw_icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexwebgr%2Ffaw_icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexwebgr","download_url":"https://codeload.github.com/alexwebgr/faw_icon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250583769,"owners_count":21454066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font-awesome","ruby","ruby-on-rails","svg","view-helpers"],"created_at":"2024-10-03T03:02:43.642Z","updated_at":"2025-04-24T07:35:37.975Z","avatar_url":"https://github.com/alexwebgr.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FawIcon\n\n### Minimalistic ruby gem that exposes a tag helper for Font Awesome icon sets.\n\nBy design it does not bundle any icons making it super fast to download and install \nas well as providing the ability to use new icons as they become available, custom ones or the PRO collection.  \n\n[![Gem Version](https://badge.fury.io/rb/faw_icon.svg)](https://badge.fury.io/rb/faw_icon)     \n[![Gitter chat](https://img.shields.io/badge/join_the_chat-gitter-brightgreen.svg)](https://gitter.im/faw_icon/Lobby)     \n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'faw_icon'\n```\n\nAnd then execute:\n\n    $ bundle\n\nOr install it yourself as:\n\n    $ gem install faw_icon\n    \nYou will need to download the .zip folder from [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself)\nwhere you can choose either the free or the PRO collection.\n\nInclude in your application.scss the `fontawesome/css/svg-with-js.css` \nideally placing in the `app/assets/stylesheets/fontawesome/svg-with-js.css` \n\napplication.scss\n\n    @import \"svg-with-js.min\";\n    @import \"fontawesome/all\";\n    \n## Configuration \nThe below options are also available for further customization\n \n| Property                  | Default                           |\n|---------------------------|-----------------------------------|\n| icons_path                | app/assets/javascripts/icons.json |\n| raw_svg_path              | vendor/fa5/raw-svg                |\n| svg_sprites_path          | public/fa5/svg-sprites            |\n| source_type               | json (json, raw, sprite, js)      |\n| icon_not_found            | `\u003csvg\u003e...\u003c/svg\u003e`                  |\n| default_family_prefix     | fa                                |\n| default_replacement_class | svg-inline--fa                    |\n\nSimply create an initializer under `/config/initializers/faw_icon.rb` and modify as needed !\nIf you no option is supplied the default will be used\n     \n```ruby\nFawIcon.configure do |config|\n  config.icons_path = 'app/assets/javascripts/icons.json'\n  config.default_family_prefix = 'fa'\n  config.default_replacement_class = 'svg-inline--fa'\nend\n```\n\nThe configuration option `source_type` was added to address the performance hit from loading large json files \nfrom the PRO collection and introduces several ways to include icons in the application.\n \n1. `json` load a json file, traverse and find the icon\n2. `raw` load a single svg file from the filesystem\n3. `sprite` load an svg sprite and target the icon by using svg fragment identifiers \n4. `js` load one or more .js files according to the recommended way described at [svg-with-js](https://fontawesome.com/how-to-use/on-the-web/using-with/jquery)\n\nThey all have pros and cons so choose the one that is right for you.\n \n`json` a single file that contains everything however it will have a noticeable impact on performance when used with \nthe PRO collection because of the file size but not so much with the free one or a reduced set.\nIn order to use copy the `fontawesome/metadata/icons.json` in `app/assets/javascripts/icons.json` \n\n`raw` requires to push in your codebase all 2.986 icons unless they are hosted in a CDN, AWS or just a different repo. And keep them \nunder `vendor/fa5`  \n\nwith `sprite` you only need four files but they can only be served from public folder for the fragment identifier feature to work \nwhich makes them available for anyone to download whereas the `raw` ones are 'hidden' in the `vendor` folder. \n\nRead more about svg sprites in the [docs](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites)\n\n`js` uses the recommended way from Font-Awesome however it introduces a rendering issue relating to turbolinks \n[more info](https://github.com/FortAwesome/Font-Awesome/issues/11924) \n\nHowever the paths to the icons can be configured and as long the parent folder with the style name i.e. `solid`, `regular`\nand so on remains the same feel free to place anywhere you like and if possible share your solution !\n\nIt is best not to mix the `source_type` configurations if you decide to switch between two types make sure to keep only the\nassets relating to that `source_type` in order to avoid manifestations of unexpected behavior.\n\nAt the same time feel free to create a pull request if you have another idea on how to include them\nor create an issue requesting a missing feature.   \n\n\n## Usage\nAll options from [additional-styling](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons) are supported with the exception of \nCSS Pseudo-elements.\n \nA mapping for the properties has been introduced in an attempt to make them more readable and easier to remember\n\n| Original property | Mapped property | Required | Original value          | Mapped value                          | Type    |\n|-------------------|-----------------|----------|-------------------------|---------------------------------------|---------|\n| class             | style           | yes      | fas, far, fal, fab, fad | solid, regular, light, brand, duotone | string  |\n| class             | name            | yes      | fa-user                 | user                                  | string  |\n| class             | fixed_width     | no       | fa-fw                   | true                                  | boolean |\n| class             | spin            | no       | fa-spin                 | true                                  | boolean |\n| class             | extra_class     | no       | N/A                     | any custom css class                  | string  |\n| data-fa-transform | transform       | no       | grow-6                  | grow-6                                | string  |\n| data-fa-mask      | mask            | no       | fas fa-comment          | fas fa-comment                        | string  |\n\n\nThe `style` and `name` are required params and the rest optional ones go into a Hash in any order they might occur.\n\nThen just use them like this\n\n      \u003c%= faw_icon 'solid', 'magic' %\u003e\n      \u003c%= faw_icon 'solid', 'star', {extra_class: 'active'} %\u003e\n      \u003c%= faw_icon 'solid', 'user', {size: '10x'} %\u003e\n      \u003c%= faw_icon 'light', 'info', {fixed_width: true} %\u003e\n      \u003c%= faw_icon 'regular', 'sync', {spin: true} %\u003e\n      \u003c%= faw_icon 'brand', 'android', {transform: 'grow-5'} %\u003e\n      \u003c%= faw_icon 'duotone', 'abacus' %\u003e\n      \nBear in mind that the `brand` icons only come in one style called `brand`(!) \nand the rest come in four variations but not all are available in the free collection.\nFind them all in the [gallery](https://fontawesome.com/icons?d=gallery)    \n\nNote: Duotone style works just like all other icons, just use the 'duotone' style property.\n\n## Troubleshooting\nIf you get an error similar to this `cannot load such file -- rexml/document (LoadError)` you need to add [rexml](https://rubygems.org/gems/rexml) gem to your Gemfile \n\n## Contributing\n\n[Issues](https://github.com/alexwebgr/faw_icon/issues) and [pull requests](https://github.com/alexwebgr/faw_icon/pulls) are more than welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n## Code of Conduct\n\nEveryone interacting in the FawIcon project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/alexwebgr/faw_icon/blob/master/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexwebgr%2Ffaw_icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexwebgr%2Ffaw_icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexwebgr%2Ffaw_icon/lists"}