RockIcons - Easily select from thousands of SVG icons

[bernhard]

Compared to previous similar modules this is using SVG icons, so there is no overhead in loading an icon-font or such. Just upload your svg iconset to /site/templates/RockIcons and check the checkbox in the module's settings to load those icons.

Rendering a selected icon is as simple as echoing the field, because if you request the field value as string it will return the SVG markup.

Download: https://www.baumrock.com/en/processwire/modules/rockicons/

[FireWire]

Made a tweak in the module that has helped, maybe a feature suggestion? ?

I have two icon sets/folders that I'm using in folders called "material-icons" and "extras". The "extras" folder contain one-off icons that supplements material icons when needed. When selecting icons they are in order of the folder name which caused the 'X' social network in the "extras" folder to appear before icons with names beginning with 'a' in "material-icons".

I added a little bit of code to sort by the name separate from their collection/namespace on line 34 when the values are rendered:

<?php 

class InputfieldRockIcons extends InputfieldText implements InputfieldHasTextValue
{
  // ...

  /**
   * Render the Inputfield
   * @return string
   */
  public function ___render()
  {
    $module = rockicons();
	
    // Added sorting by key/name
    $availableIcons = $module->icons();

    uksort($availableIcons, fn ($a, $b) => explode(':', $a)[1] <=> explode(':', $b)[1]);

    // prepare icons
    $icons = "";

    foreach ($availableIcons as $name => $path) {
      $selected = ($name == $this->value) ? "selected" : "";

    // ...
  }
  
  // ...
}

Quick fix and the results feel more natural.

RockIcons is another great module of yours I can't live without. Thanks for all of your hard work!

 

[bernhard]

Hey @FireWire thank you very much. Not sure about this one. Some libraries like fontawesome come with dedicated folders, like for solid icons or for brands. In some cases it might make more sense to sort by folder (eg to have all brands together), in others it might be different (like in your example).

I don't really want to change the default behaviour as this would change existing installations. I mean... I don't know of anybody besides you and me using this module, but nonetheless I'm not sure if changing the default is a good idea. Maybe we need a setting for that?

[FireWire]

@bernhard I think you make a really good point and I could see myself using either sorting by name or folder for different projects. 100% agree on the backwards compatibility issue as well. I see the value in having it both ways and a setting would be really great!

 

[bernhard]

Here you go @FireWire thx for your suggestion! Please check out v1.1.1

Now that I tried the different sort settings I must say that sorting by name rather than by group feels better, so I made that the new default 🙂 See the selected icon and the one to the right - same name, different group (filled/outline)