Could icons source code be improved?

[coremyslo]

What package(s) are you using?

• icons

Summary

Hi, I'm interested to use icons package as a dependency in my open source project.
I was trying to build icon font based on SVG's, and faced several issues, listed below. Not sure if they can be reported as bugs, since not sure anyone else has the same.

Relevant information

1. Could <styles> block can be replaced with relevant icon attributes?
   My Icon font generator build icon as

Instead of

Which is caused by using inline <style> tag with fill value.

<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <defs>
        <style>.cls-2{fill:none;}</style>
    </defs>
    ...
    <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-2" width="32" height="32"/></svg>

Syntax below would fix the issue:

<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    ...
    <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" fill="none" width="32" height="32"/></svg>

NOTE: actually <rect id="_Transparent_Rectangle_"> is not needed for production code.

2. Some icons has not needed svg tags, which sometimes breaks display
   Example:
   Icon

In some conditions can be rendered as

Which is cased by issue described in (1), also because svg has not used element

<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <defs>
        <style>.cls-1{fill:#fff;}.cls-2{fill:none;}</style>
    </defs>
    <title>MP4</title>
    <!-- not needed
    <polygon class="cls-1" points="27.5 22.5 27.5 18.5 22.5 18.5 22.5 9.5 23.5 9.5 23.5 17.5 27.5 17.5 27.5 9.5 28.5 9.5 28.5 17.5 29.5 17.5 29.5 18.5 28.5 18.5 28.5 22.5 27.5 22.5"/>
    -->
    <path d="M28,10v8h0V10m1-1H27v8H24V9H22V19h5v4h2V19h1V17H29V9Z"/>
    <path d="M14,23H12V9h6a2,2,0,0,1,2,2v5a2,2,0,0,1-2,2H14Zm0-7h4V11H14Z"/>
    <polygon points="8 9 6.49 14 6 15.98 5.54 14 4 9 2 9 2 23 4 23 4 15 3.84 13 4.42 15 6 19.63 7.58 15 8.16 13 8 15 8 23 10 23 10 9 8 9"/>
    <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-2" width="32" height="32"/>
</svg>

3. Some icons use transform which sometimes brakes display
   Icon "alarm"

In some conditions can be rendered as

Because of using "transform".

<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <defs>
        <style>.cls-1{fill:#010101;}.cls-2{fill:none;}</style>
    </defs>
    <title>alarm</title>
    <path d="M16,28A11,11,0,1,1,27,17,11,11,0,0,1,16,28ZM16,8a9,9,0,1,0,9,9A9,9,0,0,0,16,8Z"/>
    <polygon points="18.59 21 15 17.41 15 11 17 11 17 16.58 20 19.59 18.59 21"/>
    <rect class="cls-1" x="3.96" y="5.5" width="5.07" height="2" transform="translate(-2.69 6.51) rotate(-45.06)"/>
    <rect class="cls-1" x="24.5" y="3.96" width="2" height="5.07" transform="translate(2.86 19.91) rotate(-44.94)"/>
    <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-2" width="32" height="32"/>
</svg>

Could elements using transform be flatten?

[joshblack]

Hi there @coremyslo! 👋 The SVGs available in the package are the raw SVG assets currently and are not optimized. The icons shipped in our packages are optimized, however.

We do have a ticket open for optimizing the output of the SVGs available in this directory over in #5568 if you would like to follow along with that progress!

[coremyslo]

Hi, thank you for the quick response. Issues reported above definitely related to that ticket and after some investigation, confirming they can be fixed using svgo. I will move any further communication to that ticket.

[coremyslo]

@joshblack I missed that issue in (2) not relates to optimization
Let me show more visual

There is tag with #fff color which is overlapped by another element. After removing overlapping element:

Which causes an issue when creating iconfont using svgicons2svgfont (module that used in almost all open source icon font generators):

Reported here
nfroidure/svgicons2svgfont#94

Affected icons: mp4, add--filled

This can't be fixed using SVGO.

[joshblack]

Hi @coremyslo! What I meant by optimization is that these extra attributes (e.g. fill and stroke) are removed by SVGO when they are being optimized 👍