search

tomkr4l / font_awesome5_rails

font_awesome_5_rails is font awesome 5 gem bundled for rails asset pipeline
https://fontawesome.com/
MIT License
158 stars 25 forks source link

Add option in fa_icon to return actual SVG or file reference #3

Closed david-a-wheeler closed 6 years ago

david-a-wheeler commented 6 years ago

I'd like some option in fa_icon to return the underlying svg data. I don't care exactly how to request it, but it could be (for example) "direct: true". E.g., given this call:

fa_icon('camera-retro', type: :solid, direct: true)

It would return something like this:

<svg class="svg-inline--fa fa-camera-retro fa-w-16" aria-hidden="true" data-fa-i2svg="" data-prefix="fas" data-icon="camera-retro" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16zm426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6zM256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-48 104c-8.8 0-16-7.2-16-16 0-35.3 28.7-64 64-64 8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32 0 8.8-7.2 16-16 16z"></path>
</svg>

In addition, or instead, it'd nice to have an img src="..." or at least the filename, so that I could simply refer to the asset filename (using the usual asset pipeline), and then user clients could cache it for later.

The first approach provides immediate display (but can't be cached on the user side easily), while the second one may cause a little delay but can be easily cached on the user side.

Rationale: I don't want JavaScript to always walk through HTML DOM just to figure out how to replace the "i"s with SVGs. It's slow on the client, and it doesn't work when users disable JavaScript (yes, I have such users).

Thanks!

tomkr4l commented 6 years ago

Definitively sounds realy useful. How I understand new FA5 approach, their special javascript convert <i> tags to svgs on the client side on dom ready. Possible solutions would be convert <i> tags directly on server or include raw svgs files in gem and with direct: true option, return them straight away. Currently I'm usign FA5 svg icon sprites for smaller size.

I will look onto this and try to find solution. Anyway I will appreciate any help if anybody have an idea for solution or dealed with similar problem.

tomkr4l commented 6 years ago

@david-a-wheeler Hello I've updated gem now is possible to use icon directly as svg ``` image_tag('fa5/solid/camera.svg') . It's is now possible to include font_awesome5_webfont which will include just font without javascript. Checkout docs for more info. Hope it helps.

david-a-wheeler commented 6 years ago

Awesome! Thanks! I intend to check this out soon, thanks very much.