[FEATURE REQUEST] Ability to configure svg sprite's symbol id attribute

[abhinavmsra]

Acknowledgement

I love svgeez gem & this is my go-to tool for SVG icon system in all of my Rails projects. I would like to express my gratitude to the maintainers of this project. 👏👏👏

Current Behavior

Command:

svgeez build --source app/assets/images/icons/ --destination app/assets/images/icon-sprite.svg --with-svgo

Icon List

app/assets/images/icons
├── icon-instagram.svg
├── icon-facebook.svg
├── icon-cart.svg
....

--destination app/assets/images/icon-sprite.svg option creates a svg sprite with each icon id prefixed with icon-sprite, inherited from the destination filename.

Sample Sprite

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" id="icon-sprite">
   <symbol xmlns:xlink="http://www.w3.org/1999/xlink" id="icon-sprite-icon-instagram" >...</symbol>
   <symbol xmlns:xlink="http://www.w3.org/1999/xlink" id="icon-sprite-icon-facebook" >...</symbol>
   <symbol xmlns:xlink="http://www.w3.org/1999/xlink" id="icon-sprite-icon-cart" >...</symbol>
</svg>

HOW??

Each icon symbol <symbol></symbol> is represented by Svgeez::Elements::SymbolElement class
(svgeez/elements/symbol_element.rb). It's id attribute is evaluated in the following method

def element_attributes(attributes)
  attrs = attributes.scan(/(?:viewBox|xmlns:.+?)=".*?"/m)
  attrs << %(id="#{@file_id}-#{File.basename(@file_path, '.svg').gsub(/['"\s]/, '-')}")
end

Essentially icon id is set to [@file_id]-[ICON_FILENAME]. Now @file_id is set to sprite filename (icon-sprite) by Svgeez::Elements::SvgElement as

def symbol_elements
  @source.file_paths.map do |file_path|
    SymbolElement.new(file_path, @destination.file_id).build
  end
end

Issue

As evident from the icon sprite sample, each icon id is prefixed with icon-sprite.

1. IMHO this prefixing feels a bit redundant.
2. This prohibits teams from having their own icon nomenclature.

Proposed Enhancement

1. Introduce a new cli option --icon-prefix
2. Retain current behaviour in case this option is not used.
3. If used, use --icon-prefix to generate svg symbol ids instead of @file_id.

It would be great to have some community feedback on this. Meanwhile, I am trying to implement my proposal & will share shortly.

[jgarber623]

Thanks for filing this issue and for the associated pull request, @abhinavmsra! I'll give your PR a review and post any comments or ideas there. 👏

[jgarber623]

Released as version 3.2.0. Thanks again for the issue and the PR! 🎉