@mozaic-ds/vue/src/components/usingIcons.mdx

Mozaic-Vue is the Vue.js implementation of ADEO Design system

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

<Meta title="Getting Started/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).