First, install @astraicons/vue
from npm:
npm install @astraicons/vue
Next, import each icon individually as a Vue component:
<template>
<div>
<GlobalIcon class="size-6 text-blue-500" />
<p>...</p>
</div>
</template>
<script setup>
import { GlobalIcon } from "@astraicons/vue/linear";
</script>
The 24x24 linear icons can be imported from @astraicons/vue/linear
, the 24x24 bold icons from @astraicons/vue/bold
, and the 24x24 brand icons from @astraicons/vue/brand
.
Icons follow an upper camel case naming convention and always end with Icon
.
View the full list of icon names on UNPKG →
While we welcome contributions to enhance the project, our current focus is on resolving issues like incorrect TypeScript types or improperly exported icons.
Please note that we are not accepting contributions for new icons.
This project uses parts from the HeroIcons library from TailwindLabs.
This library is released under the MIT license.