search

ionic-team / ionicons

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
http://ionicons.com
MIT License
17.39k stars 2.06k forks source link

bug: mission `ionicon` class in `./dist/svg/*.svg` files #1367

Closed sto3psl closed 2 weeks ago

sto3psl commented 1 month ago

Current Behavior

In my project I'm loading SVGs from ./dist/svg/* and style them by using the ionicon class on the svg tag. This worked fine until ionicons@7.2.2 but ionicons@7.2.3 removed that class in a patch release, rendering my icons in a broken state.

This is the PR that introduced the change https://github.com/ionic-team/ionicons/pull/1313.

I don't know if this was an accident and should continue to work or if I'm "holding it wrong" and users of the npm package are not supposed to load stuff from ./dist/svg/. I'm hoping for the first option.

Link to SVG from version 7.2.2.: https://unpkg.com/ionicons@7.2.2/dist/svg/accessibility-outline.svg

<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><circle fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" cx="256" cy="56" r="40"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M204.23 274.44c2.9-18.06 4.2-35.52-.5-47.59-4-10.38-12.7-16.19-23.2-20.15L88 176.76c-12-4-23.21-10.7-24-23.94-1-17 14-28 29-24 0 0 88 31.14 163 31.14s162-31 162-31c18-5 30 9 30 23.79 0 14.21-11 19.21-24 23.94l-88 31.91c-8 3-21 9-26 18.18-6 10.75-5 29.53-2.1 47.59l5.9 29.63 37.41 163.9c2.8 13.15-6.3 25.44-19.4 27.74S308 489 304.12 476.28l-37.56-115.93q-2.71-8.34-4.8-16.87L256 320l-5.3 21.65q-2.52 10.35-5.8 20.48L208 476.18c-4 12.85-14.5 21.75-27.6 19.46s-22.4-15.59-19.46-27.74l37.39-163.83z"/></svg>

[!NOTE] ionicon class included.

Link to SVG from version 7.2.3.: https://unpkg.com/ionicons@7.2.3/dist/svg/accessibility-outline.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" cx="256" cy="56" r="40"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M204.23 274.44c2.9-18.06 4.2-35.52-.5-47.59-4-10.38-12.7-16.19-23.2-20.15L88 176.76c-12-4-23.21-10.7-24-23.94-1-17 14-28 29-24 0 0 88 31.14 163 31.14s162-31 162-31c18-5 30 9 30 23.79 0 14.21-11 19.21-24 23.94l-88 31.91c-8 3-21 9-26 18.18-6 10.75-5 29.53-2.1 47.59l5.9 29.63 37.41 163.9c2.8 13.15-6.3 25.44-19.4 27.74S308 489 304.12 476.28l-37.56-115.93q-2.71-8.34-4.8-16.87L256 320l-5.3 21.65q-2.52 10.35-5.8 20.48L208 476.18c-4 12.85-14.5 21.75-27.6 19.46s-22.4-15.59-19.46-27.74l37.39-163.83z"/></svg>

[!NOTE] ionicon class missing.

Expected Behavior

All SVG files within /dist/svg/ include a class="ionicon" on their <svg> tag, like it's been for multiple major versions.

Steps to Reproduce

  1. Install ionicons@7.2.2.
  2. See that icons within node_modules/ionicons/dist/svg/* have class="ionicon" on their <svg> tag.
  3. Install ionicons@7.2.3.
  4. The class attribute on the <svg> tag is gone.

Code Reproduction URL

No response

Additional Information

No response

liamdebeasi commented 2 weeks ago

I'm not really sure why we ship the SVGs in two different locations, but the icons at dist/ionicons/svg have the correct class that you can use for now. I'll take a closer look and see why we have both distributions.

sto3psl commented 2 weeks ago

Oh that's good to know, thanks! These icons are still a bit different from the ones in dist/svg/ but I can work with that.