Add ID attribute to root element

Would there be any support for adding an ID with the icon name to the root <svg> element?

This would allow for referencing the icons in an SVG <use> element. For example, adding id="hi-archive" would allow importing via:

<svg class="h-6 w-6 text-red-500">
  <use xlink:href="/img/heroicons/outline/archive.svg#hi-archive"/>
</svg>

This would be ideal for things like menu icons that are used on every page, eliminating the need to embed the full SVG each time while still allowing them to have the color styled.

It would increase the file size of the SVGs, but tools like svgo’s cleanupIDs can be used to mitigate this if you’re not using them.

[Th3S4mur41]

@davecardwell wouldn’t it make more sense to use both folder and filename as id?

e.g. heroicons/outline/archive.svg should get the ID outline-archive That way you can also combine them in a sprite, which would not work with the same hardcoded ID for each image.

[Th3S4mur41]

Found a solution through webpack configuration that doesn’t require editing the assets… The following config in my Vue project add automatically the file name as ID when creating the sprite

configureWebpack: {
		module: {
			rules: [
				{
					test: /\.svg$/,
					use: ['svg-sprite-loader', 'svgo-loader']
				}
			]
		}
	},
chainWebpack: (config) => {
		config.module
			.rule('svg')
			.test(() => {
				return false;
			})
			.use('file-loader');
	}

That makes using any icon from the sprite possible with just <svg><use href="#icon_name" /></svg>