import { Meta } from '@storybook/blocks';
import { Source } from '@storybook/addon-docs';

<Meta title="Using Icons" />

# Using Icons

To use icons in Vue applications, you need to install a dedicated package.

You must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/icons-vue):

<Source
  language="bash"
  dark
  code="npm install @mozaic-ds/icons-vue"
/>

Or with **Yarn**:

<Source
  language="bash"
  dark
  code="yarn add @mozaic-ds/icons-vue"
/>

You can then start importing the icon of your choice into your Vue component:

<Source
  language='html'
  dark
  code={`
// In one of the .vue file of your application

<template>
  <A11y20 fill="#333" />
</template>

<script setup>
import A11y20 from '@mozaic-ds/icons-vue/src/components/A11y20/A11y20.vue';
</script>
`} />

[The full list of icons is available here](https://github.com/adeo/mozaic-icons-vue/tree/main/src/components).