Thanks for this great example! 😃 One downside of this approach is that it forces us to split the svg and its paths. When working with a design system or external SVG library, all icons would probably be provided as plain .svg files.

Is there a way to easily generate all the path icon components from a set of .svg files?

I am trying implement this but I will have icons of different heights and widths coming from the design team. I am thinking the icon components could wrap themselves in the IconBase component and send a specific viewport to it. An icon component template would look like this:

<IconBase view-port="0 0 12 7" :width="width" :height="height"> <IconTrash/> </IconBase>

So I think I will need a more basic base icon that can take in props and put this together. I had been passing the viewport in to the IconBase but that should really be stored in each icon. I this making sense?

`<svg xmlns="http://www.w3.org/2000/svg"
:width="width"
:height="height"
:viewBox="viewBox"
:aria-labelledby="iconName"
role="presentation"

<title
    :id="iconName"
    lang="en"
>{{ iconName }} icon</title>
<defs>
    <linearGradient x1="100%" y1="81.5315548%" x2="0%" y2="18.4684452%" id="linearGradient-1">
        <stop stop-color="#35B8FF" offset="0%"></stop>
        <stop stop-color="#007EFE" offset="100%"></stop>
    </linearGradient>
</defs>
<g :fill="iconColor">
    <slot />
</g>

`

如上所示，defs如何放在子组件里

so I got this warning:
"IconWrite" was accessed during render but is not defined on instance.

and I don't know why?

Hi, and sorry for the lengthy bug. :P

The id/aria-labelledby pattern used for the icon components can be useful for VoiceOver support (other screen readers should manage to read the <title> without it), but it’s a difficult technique because it requires unique ids and there’s a risk of duplicate ids in the document. So using the icon name only is a bit risky.

1. If this name is generic, e.g. menu, it may already be used in the page, and adding an element with this id before the “real” target using that id may break existing functionality (e.g. <a href="#menu">Skip to navigation</a> might point to an icon and not to the menu somewhere else in the page, <label for="user">User name</label> may point to an icon and not the relevant input, etc.).

2. If an icon is used several times (e.g. in a loop), the document will have duplicate ids and it’s unclear if aria-labelledby will work correctly in this case.

It might be safer to generate a unique id, for instance:

// only once at instantiation, not sure if that should be a computed property in Vue
const id = 'icon-' + iconName + '-' + Math.floor(Math.random() * 1000000) // e.g. "icon-arrow-764820"

Do you think this could be included in your examples in some way?

On a related topic, in my experience using a technical name (e.g. an icon id derived from a file name) is not satisfying alternative text: the icon name may be different from the meaning we’re trying to convey, and when we start localizing the site it’s even more unhelpful (e.g. a Spanish speaker would be lost with a button whose label is "looking-glass icon").

I’ve used two different solutions in the past:

1. Pass a different prop/parameter explicitly for the alt text (a prop named alt could make sense). Then in the icon component or template I only output the <title id="…">…</title> and aria-labelledby attribute if alt text is provided.
2. Or avoid alt text on <svg> icons altogether, and:
   • for "icon + visible label" patterns, do nothing;
   • for icon-only buttons and links, use <a aria-label="…">…</a> and <button aria-label="…">…</button>, which has less flaky support in screen readers.

Because of the technical difficulty and footgun of duplicate ids I tend to go with the second solution, but both are okay.