<p align="center">
  <img alt="ADEO Design system - Vue Icons" src="assets/images/adeo-design-system-vue-banner.svg" />
</p>

<h1 align="center">
  ADEO Design system - Vue Icons
</h1>

<p align="center">
  A library containing all of the icons as Vue components for the ADEO Design system.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@mozaic-ds/icons-vue">
    <img src="https://img.shields.io/npm/v/@mozaic-ds/icons-vue?label=NPM&logo=npm&color=yellow" alt="npm alpha version">
  </a>
  <a href="/CONTRIBUTING.md">
    <img src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github" alt="PRs welcome" />
  </a>
  <a href="https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4">
    <img src="https://img.shields.io/badge/Slack-mozaic_support-611f69.svg?logo=slack" alt="Slack mozaic-support" />
  </a>
  <a href="https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system">
    <img src="https://img.shields.io/badge/KEYS-Adeo_Design_System-4526ce.svg" alt="KEYS ADEO Design system" />
  </a>
</p>

<h2 align="center">
  Related:
  <a href="https://github.com/adeo/mozaic-icons">SVG Icons</a>
  <span> · </span>
  <a href="https://github.com/adeo/mozaic-icons-svelte">Svelte Icons</a>
</h2>

## 🎨 Getting started

**ADEO Design system** is a global and collaborative design system that facilitates the designer and developer experience, enabling them to create universal interfaces perfectly aligned with the business strategy of [Adeo](https://www.adeo.com/).

Learn more about the vision and guidelines by visiting the [main documentation website](https://mozaic.adeo.cloud/).

## 📦 Install

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

```bash
npm install @mozaic-ds/icons-vue
```

Or with **Yarn**:

```bash
yarn add @mozaic-ds/icons-vue
```

## 📝 Usage

After the installation, you can start importing the icon component needed:

```vue
// In one of the .vue file of your application

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

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

## 📰 Changelog

Releases are managed with **GitHub Releases**, including the changelog for each one.<br/>
Access to the [Changelog](/CHANGELOG.md) to find out about the detailed changes to each release.

## 📣 Stay in touch

- Join the [#mozaic-support](https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4/) channel on **Slack**
- Follow our [KEYS page](https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system)

## 🐞 Bugs and feature requests

Have a bug or a feature request?<br/>
Please [open an issue](https://github.com/adeo/mozaic-icons-vue/issues/new/choose) and use the template associated with your request.

However, if you are able to contribute and fix bugs, build new features, or help to improve the project documentation, feel free to do it! _(more information below)_

## ✍️ Contributing

Setup the project to start contributing.

```bash
// Clone the repo
git clone git@github.com:adeo/mozaic-icons-vue.git

// Go to the cloned directory
cd mozaic-icons-vue

// Checkout the branch you are working on
$ git checkout <branch name>

// Install dependencies
npm install

// Build icons
npm run icons:build

// Build project
npm run build 
```

We're always looking for contributors to help us fix bugs, build features, or help us improve the documentation. If you're intersted check out our [Code of Conduct](/CODE_OF_CONDUCT.md) and [Contribution Guide](/CONTRIBUTING.md).

## 🧑‍💻 Contributors

**Owners**

**[ADEO Design system Team](https://github.com/orgs/adeo/teams/adeo-design-system)**

**Maintainers**

- **[David Martin](https://github.com/dmartinds)**

## 📄 Licensing

This project is licensed under the Apache V2 License. See [LICENSE](LICENSE) for more information.
