Vue Integration

Iconweuse provides a native, tree-shakeable integration with Vue 3. All components are shipped with full TypeScript definition files and auto-completion support.

Installation

Install the main package using your package manager of choice:

npm install iconweuse

Basic Usage

Import individual icons as components within your Single File Components (SFCs). This approach is highly recommended for production since it allows bundlers like Vite or Webpack to automatically tree-shake unused icons.

<script setup>
import { SearchIcon, UserIcon, SettingsIcon } from 'iconweuse/vue';
</script>

<template>
  <div class="flex gap-4">
    <SearchIcon :size="24" color="#FE663A" />
    <UserIcon :size="24" />
    <SettingsIcon class="animate-spin" />
  </div>
</template>

Component Props

Our Vue components accept standard SVG props to customize their dimensions, style, and responsiveness:

• `size` (Number | String): Defines width and height. Defaults to `24`.
• `color` (String): Sets the SVG stroke or fill color. Defaults to `currentColor`.
• `stroke-width` (Number): Configures the thickness of icon outlines. Defaults to `2`.

Global Registration

If you prefer to make specific icons available globally throughout your application, register them inside your main entry file:

import { createApp } from 'vue';
import App from './App.vue';
import { SearchIcon, HomeIcon } from 'iconweuse/vue';

const app = createApp(App);

app.component('SearchIcon', SearchIcon);
app.component('HomeIcon', HomeIcon);

app.mount('#app');