You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Astro Icon is a similar module for Astro projects that also utilizes Iconify under the hood. It automatically optimizes repeated references to the same icon on a page, using a simple approach that results in smaller HTML documents (official documentation).
In a nutshell, the first time the <Icon> component is included on a page, it defines a sprite <symbol> with a unique ID and immediately renders that symbol with the <use> element. If the same icon is referenced again, <Icon> will render only a <use> element, reducing the overall size of the HTML document by referencing the existing <symbol>.
With that said:
<Iconname="logo" />
<!-- First usage generates the following HTML --><svgdata-icon="logo"><symbolid="ai:uniqueid"><!-- contents of logo.svg --></symbol><usexlink:href="#ai:uniqueid"></use></svg><Iconname="logo" />
<!-- Additional usage generates the following HTML --><svgdata-icon="logo"><usexlink:href="#ai:uniqueid"></use></svg>
It'd be nice to have this feature in Nuxt Icon module as well.
The text was updated successfully, but these errors were encountered:
Sounds like an interesting idea to avoid duplication. However, I am not sure how to handle the cases when the first icon gets unmounted while the second remains.
On the other hand, I think the CSS mode solves this problem is a much better way (which is already the the default). Wonder what's the block prevent you from using the CSS mode?
Wonder what's the block prevent you from using the CSS mode?
#167 and fine-grained control over the customization of icons, especially the local ones.
I am not sure how to handle the cases when the first icon gets unmounted while the second remains.
Perhaps by inserting a hidden <svg> element right after the starting <body> tag. This <svg> would contain a <symbol> for each icon used in the current HTML document. This way, all icons are referenced by <use>, and removing one doesn't break its duplications elsewhere in the document.
<!-- First usage --><Iconname="logo" />
<!-- Additional usage--><Iconname="logo" />
<!-- Generates the following HTML --><body><svghiddenaria-hidden="true"><symbolid="ai:uniqueid"><!-- contents of logo.svg --></symbol></svg><!-- Some other markup --><!-- Note that `href` suffices since `xlink:href` has been deprecated --><svgdata-icon="logo"><usehref="#ai:uniqueid"></use></svg><svgdata-icon="logo"><usehref="#ai:uniqueid"></use></svg></body>
Astro Icon is a similar module for Astro projects that also utilizes Iconify under the hood. It automatically optimizes repeated references to the same icon on a page, using a simple approach that results in smaller HTML documents (official documentation).
In a nutshell, the first time the
<Icon>
component is included on a page, it defines a sprite<symbol>
with a unique ID and immediately renders that symbol with the<use>
element. If the same icon is referenced again,<Icon>
will render only a<use>
element, reducing the overall size of the HTML document by referencing the existing<symbol>
.With that said:
It'd be nice to have this feature in Nuxt Icon module as well.
The text was updated successfully, but these errors were encountered: