Not possible to change stroke-width on Vue icon components

[Jacob Timmerman]

Discussed in #946

^{Originally posted by Jacobtims March 9, 2023}
I want to change the stroke-width of an icon on the Vue component.
Like this:

import { PlusIcon } from '@heroicons/vue/24/solid';

<PlusIcon class="h-5 w-5" stroke-width="2"/>

This unfortunately doesn't work.

It's not possible to change the stroke-width of an icon when using the Vue.js package.

[Adam Wathan]

Hey! Yep right now we don't expose a prop for stroke-width. If you'd like to change the stroke width you can do so with CSS:

import { PlusIcon } from '@heroicons/vue/24/solid';

<PlusIcon class="h-5 w-5 stroke-2"/>

Hope that helps! Going to close as not a bug (this would be a new feature) and no plans to work on this at the moment.

[Jacob Timmerman]

The stroke-2 class doesn't work on the component.

[Patrick]

for me it is not working neither. Even using the given example with PlusIcon and !stroke-2 or !stroke-[8]|stroke-[8].

[Christos Tsangaris]

stroke-[4px] or any amount for that matter will work just fine. So:

<PlusIcon class="h-5 w-5 stroke-[2px]"/>