Server side rendering of fontawesome

I just had a look at fontawesome.io. Since version 5 they now propose to use client-side javascript that generates inline SVG based on the fontawesome library . Creating inline SVG seems like a good idea because the SVGs can then be styled with CSS.
fontawesome how to use
However I think it’s a waste of bandwidth to do this on the client side. Fontawesome also describe an option to do the rendering server-side, but it requires node.js.
Wouldn’t it be nice to have a PHP helper-function in Kirby that does the same thing, like

<?php fa("fas fa-camera-retro") ?>

What do you think?

I don’t see this as a core feature of Kirby, to be honest. It would make more sense as a plugin, because not everyone wants to use Fontawesome icons on the frontend.

A work around is to build your own SVG files from the FontAwesome library. What I do is use an app called RightFont which is a font manager that can install from a number of online sources, and from your local system. You can search icon fonts and then drag the character from RightFont’s window into Sketch or some other SVG capable program (I know the affinity apps work too). If you don’t have RightFont or Sketch, you can cheat with this repo.

The neat thing about that is I i can just use the icons I need, and from there I can use them individually or make a sprite map or whatever. You can easily inline them with a little jQuery or Vanilla JS.

Then i use this line in an NPM script to recursively optimise them when i build for production (you need SVGO installed):

find ./public/content -name '*.svg' -type f -exec svgo  {} \\;

Of course you can also embed them in stylesheet and colour them up via sass/less/css.

If you download the Fontawesome package, you get all icons as svg, so no need to use a special tool to drag them into Sketch or another program. The same holds true for other icon sets.

Do you?? I install it via NPM and use a folder copy to move font files into my project build folder. I dont think ive really poked around in there, so never noticed there was SVGs too.

You live and learn :slight_smile:

You can also download custom selection of svg icons from different sets from services like IcoMoon and similar.

Anyway, with those svg icons in place, it’s no magic to inline those file on the server side.

No :tophat: :rabbit: to you perhaps but as a front end person, i’m guilty of reaching for javascript based solutions to these problems. Never even occurred to me that PHP could do it.

Well, this whole thread is about server side rendering, not frontend.

I agree, probably no magic. Today I just copy/paste the PATH from SVG (fa or other) right into HTML and surround it with the SVG Tag and attributes. It would just be nicer to refer to those SVG (located e.g. in assets/svg) by name in the template. So a little PHP would do the copy/ pasting…
Could be a plug-in, too, of course.
BTW: the panel already allows to refer to Fontawesome icons by name.

Here is a basic starting point:

function fa($iconName) {
  $path = c::get('fa.imagepath', 'images/fontawesome');
  $fileName = kirby()->roots()->assets().DS.$path.DS.$iconName.'.svg';
  $icon = '';
  if(is_file($fileName)) {
    $file = f::read($fileName);
    $iconString = 'class="svg-inline--fa fa-'.$iconName.' fa-w-16" aria-hidden="true" role="img" ';
    $icon = substr_replace($file, $iconString, 5, 0);
  }
  return $icon;
}
echo fa('camera-retro');

The function tries to fetch a file with the name given as parameter. Then it simply inserts the string $iconString after the opening <svg. Feel free to adapt as needed and add more attributes. If you want to pass ‘fa-camera-retro’ as parameter, you would have to remove the first part of the string before trying to fetch the file.

Depending on the number of icons and how often you use these in a template a look at symbols might be worth it.

@texnixe answer probably suits you more because you don’t have to inline all available icons. Symbols are more usefull when using them together with some js lazyloading or localStorage caching or when bandwidth does not matter :wink:

Oh, wow! Thanks. Will give both your approaches a try! Thank you.

If you want to use symbols as @lukaskleinschmidt proposed and you’re using gulp, you may want to have a look at gulp-svg-symbols to let your sprite generate automatically.

For the HTML part I would use a snippet (for the templates) and/or a custom kirbytag (for editor textareas).