search

tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
https://heroicons.com
MIT License
21.03k stars 1.27k forks source link

Not possible to change stroke-width on Vue icon components #952

Closed Jacobtims closed 1 year ago

Jacobtims commented 1 year ago

Discussed in https://github.com/tailwindlabs/heroicons/discussions/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'; ``` This unfortunately **doesn't work**.

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

adamwathan commented 1 year ago

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.

Jacobtims commented 1 year ago

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

patrickmathia commented 1 year ago

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

tsangaris commented 6 months ago

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

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