Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Auto-optimized sprites using <symbol> and <use> #256

Open
ShayanTheNerd opened this issue Sep 15, 2024 · 3 comments
Open

Auto-optimized sprites using <symbol> and <use> #256

ShayanTheNerd opened this issue Sep 15, 2024 · 3 comments

Comments

@ShayanTheNerd
Copy link

ShayanTheNerd commented Sep 15, 2024 •
edited
Loading

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:

<Icon name="logo" />
<!-- First usage generates the following HTML -->
<svg data-icon="logo">
  <symbol id="ai:uniqueid"><!-- contents of logo.svg --></symbol>
  <use xlink:href="#ai:uniqueid"></use>
</svg>

<Icon name="logo" />
<!-- Additional usage generates the following HTML -->
<svg data-icon="logo">
  <use xlink:href="#ai:uniqueid"></use>
</svg>

It'd be nice to have this feature in Nuxt Icon module as well.
@antfu
Copy link
Member

antfu commented Sep 16, 2024

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?

@ShayanTheNerd
Copy link
Author

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 -->
<Icon name="logo" />
<!-- Additional usage-->
<Icon name="logo" />

<!-- Generates the following HTML -->
<body>
   <svg hidden aria-hidden="true">
      <symbol id="ai:uniqueid"><!-- contents of logo.svg --></symbol>
   </svg>

   <!-- Some other markup -->

   <!-- Note that `href` suffices since `xlink:href` has been deprecated -->
   <svg data-icon="logo">
      <use href="#ai:uniqueid"></use>
   </svg>
   <svg data-icon="logo">
      <use href="#ai:uniqueid"></use>
   </svg>
</body>

@Koc
Copy link

Koc commented Sep 26, 2024

that's how nuxt-sprite working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Koc @antfu @ShayanTheNerd