Is there a way to add a stroke/border around some icons?

[galexrt]

I'm currently trying to switch a project from using mdi-vue components to using Nuxt UI Icon (with dynamic: false to use CSS class icons).

With the component icons I was able to target the <svg> of the icons via CSS to, e.g., add a stroke/border, to some icons. Is this somehow possible with CSS base64 SVG embedded icons as well?
For such an use case, do you think it might make more sense to use icon components to be able to target the <svg> of the icons?

[hyoban]

So, maybe we could make extraProperties accept a function so that you can apply extra
properties conditionally. WDYT?

[galexrt]

I have thought about it a bit more and the use case I have to be able to use icons normally and have some icons with separate props.

Collection Aliases

One would basically "create" an alias to point to an existing icon collection, so only the icons with the different collection name will have the extraProperties added to them.

// [...]
collectionAliases: {
  mdistroke {
    collection: 'mdi',
    extraProperties: {
       stroke: '#000000',
       'stroke-width': '0.75px',
       'stroke-linejoin': 'round,
    },
  ],
},
// [...]

I could use i-mdistroke-home and get the i-mdi-home with the css properties added to the <svg> of the icon.

Icon Aliases

i-mdi-home icon is available normally without extra properties.
For the few components/pages where one would need to have the i-mdi-home icon but with a stroke/border added to it, an "alias" would be added to the config per icon (but being able to reference/resolve existing icons, so SVG code doesn't need to be copy'n'pasted around ). This would result in i-custom-mdi-home being available with the extra properties for these cases.

// [...]
iconAliases: {
  mdi: [
    {
      alias: 'i-custom-mdi-home',
      icon: 'i-mdi-home',
      extraProperties: {
       stroke: '#000000',
       'stroke-width': '0.75px',
       'stroke-linejoin': 'round,
    },
  ],
},
// [...]

---

I personally lean towards the "Collection Aliases" idea, as that would enable using a whole collection with several different properties by just aliasing the collection name, and being able to continue using both where applicable.

[hyoban]

This is an interesting idea, do you want to create a PR? I would love to accept it.

[galexrt]

Sure, I'll try and see how far I get, thanks! :-)

[frasza]

I would love to have an option to define stroke-width of icons. Currently we are using Tabler icons but not being able to define stroke-width is unfortunate.

[hyoban]

@frasza You can custom stroke width for Tabler icons now in v1.8.0

[frasza]

@hyoban ty! Is it somehow possible to define stroke width for individual icon use?

What I have done as of now is add additional iconsPlugin with different stroke and prefix, but I am not sure what is good idea?

plugins: [
    iconsPlugin({
      collections: getIconCollections(['tabler']),
      strokeWidth: 1.5,
    }),
    iconsPlugin({
      collections: getIconCollections(['tabler']),
      strokeWidth: 1.1,
      prefix: 'i-thin',
    }),
  ],