Open galexrt opened 2 months ago
So, maybe we could make extraProperties
accept a function so that you can apply extra
properties conditionally. WDYT?
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.
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.
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.
This is an interesting idea, do you want to create a PR? I would love to accept it.
Sure, I'll try and see how far I get, thanks! :-)
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.
@frasza You can custom stroke width for Tabler icons now in v1.8.0
I'm currently trying to switch a project from using
mdi-vue
components to using Nuxt UI Icon (withdynamic: 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?