<Icon>
component
The <Icon>
component provides a seamless way to show icons in your app. You can use your own icons or use the Iconify icon sets.
Usage
Custom icons
To use your own icons, you must first create a SVG or a PNG file inside the assets/icons
folder. The file name must be in kebab-case
.
Then, use the name
prop within the <Icon>
component with the file name without the extension. For example, if you have a vulmix.svg
file, you can use it like this:
<Icon name="vulmix" />
For styling, you can use common CSS font styles, like color
, font-size
, etc. You can even use Tailwind CSS classes, like text-green-400
or text-3xl
.
<Icon name="vulmix" class="text-green-400" />
<Icon name="vulmix" class="text-3xl text-pink-400" />
You can also use nested icon files, like assets/icons/brand/vulmix.svg
, and use it like this:
<Icon name="brand/vulmix" />
Since the default icon behaviors as a font, for PNG or multi-color SVG icons you need special props. See the sections below for more details.
Multi-color icons
For multi-color SVG icons, you can use the font
prop set to false
:
<Icon name="vulmix" :font="false" />
<Icon name="vulmix" :font="false" class="text-4xl" />
This will render the SVG as is, and will not be affected by font styles (except for font-size
, which will still work).
PNG icons
The Icon
component uses SVG icons by default, but you can also use PNG icons by setting the format
prop to png
:
<!-- assets/icons/vulmix.png -->
<Icon name="vulmix" format="png" />
<Icon name="vulmix" format="png" class="text-4xl" />
Font color styles will not work with PNG icons.
Iconify icons
The <Icon>
component also allows you to use any icons from the Iconify icon sets, with the icon
prop:
<Icon icon="mdi:facebook" />
<Icon icon="mdi:facebook" class="text-4xl" />