3 ms·

Just include an SVG sprite in the HTML page. Then, like the article says, you can reference each icon with <use href="#icon-name" /> and they will be available

Just include an SVG sprite in the HTML page. Then, like the article says, you can reference each icon with <use href="#icon-name" /> and they will be available far before your js bundle is parsed.

afavour 3y ago
You could also just use data URIs in your CSS. “How else could you possibly have SVGs render inline other than to include a massively bloated JS representation of a string in your bundle?” - the React ecosystem, 2023 The answer, as you’ve shown, is “use the platform”. Sometimes I feel like React actively works against that.
- davnicwil 3y ago
  [Edited per below comment pointing out my mistake about external CSS loading order] -- this is a decent alternative, thanks!
  - jacobr 3y ago
    External css files are render blocking, meaning any content after a <link rel=stylesheet> will not be visible until the css has been loaded.
    - deleted 3y ago
      [deleted]
- bryanrasmussen 3y ago
  I have this idea that as you go up a level of stack parts of the underlying stack get underused, people want to use things at the same level in the stack - for example if you are using React or Vue have everything React or Vue. This makes things work worse because of course you have those underlying levels for a reason, but it makes people feel architecturally purer or something (it is at this point the idea breaks down for me, I have no idea why it is that everything should be in whatever framework you are using, just that this seems to how everyone I ever work with feels on the matter)
  - afavour 3y ago
    I agree, I also think React is a particularly regular victim because of JSX. A JSXed SVG looks just the same as a regular SVG in your editor, if everyone was forced to see the endless chains of React.createElement() they might start to feel uneasy.
butz 3y ago
Using SVG sprites gives benefit of caching, as icons tend to change less frequently than main application code. And be very careful to use real SVG, not bitmaps wrapped in SVG, as it will very quickly bloat your sprite size.
deleted 3y ago
[deleted]
c_s_guy 3y ago
Are there any negative impacts to accessibility with the `<use href="#icon-name" />` sprite approach?

Just include an SVG sprite in the HTML page. Then, like the article says, you can reference each icon with <use href="#icon-name" /> and they will be available far before your js bundle is parsed.

afavour 3y ago

You could also just use data URIs in your CSS. “How else could you possibly have SVGs render inline other than to include a massively bloated JS representation of a string in your bundle?” - the React ecosystem, 2023 The answer, as you’ve shown, is “use the platform”. Sometimes I feel like React actively works against that.

davnicwil 3y ago
[Edited per below comment pointing out my mistake about external CSS loading order] -- this is a decent alternative, thanks!
- jacobr 3y ago
  External css files are render blocking, meaning any content after a <link rel=stylesheet> will not be visible until the css has been loaded.
  - deleted 3y ago
    [deleted]
bryanrasmussen 3y ago
I have this idea that as you go up a level of stack parts of the underlying stack get underused, people want to use things at the same level in the stack - for example if you are using React or Vue have everything React or Vue. This makes things work worse because of course you have those underlying levels for a reason, but it makes people feel architecturally purer or something (it is at this point the idea breaks down for me, I have no idea why it is that everything should be in whatever framework you are using, just that this seems to how everyone I ever work with feels on the matter)
- afavour 3y ago
  I agree, I also think React is a particularly regular victim because of JSX. A JSXed SVG looks just the same as a regular SVG in your editor, if everyone was forced to see the endless chains of React.createElement() they might start to feel uneasy.

butz 3y ago

Using SVG sprites gives benefit of caching, as icons tend to change less frequently than main application code. And be very careful to use real SVG, not bitmaps wrapped in SVG, as it will very quickly bloat your sprite size.

deleted 3y ago

[deleted]

c_s_guy 3y ago

Are there any negative impacts to accessibility with the `<use href="#icon-name" />` sprite approach?