Librairie d'icônes SVG DOING AI

Ce projet fournit une collection d'icônes SVG personnalisées pour une utilisation dans vos applications. Vous pouvez facilement installer la librairie et intégrer les icônes dans vos projets.

Installation

Installation via npm

Pour installer la librairie dans votre projet, exécutez la commande suivante :

npm i @doing-ai/doing-ai-icons

Installation via pnpm

Pour installer la librairie dans votre projet en utilisant pnpm, exécutez la commande suivante :

pnpm add @doing-ai/doing-ai-icons

Utilisation

Utilisation avec React

Pour utiliser les icônes dans un projet React, importez simplement l'icône souhaitée et utilisez-la dans votre composant :

import { IconName } from '@doing-ai/doing-ai-icons';

const MyComponent = () => (
    <div>
        <img src={IconName} alt="Name" />
    </div>
);

Utilisation avec Vue

Pour utiliser les icônes dans un projet Vue, importez l'icône souhaitée et enregistrez-la en tant que composant :

<script>
import { IconName } from '@doing-ai/doing-ai-icons';
</script>

<template>
  <div>
    <img :src="IconName" alt="Name" />
  </div>
</template>

Utilisation avec Angular

Pour utiliser les icônes dans un projet Angular, importez l'icône souhaitée et ajoutez-la à votre module :

import { IconName } from '@doing-ai/doing-ai-icons';

@Component({
    selector: 'app-example',
    template: `
    <div>
      <img [src]="iconName" alt="Name">
    </div>
  `
})
export class ExampleComponent {
    iconName = IconName;
}

Utilisation recommandée

Il est recommandé de créer un composant personnalisé pour afficher les icônes, ce qui permet de les utiliser de manière plus flexible dans votre application. Voici un exemple de composant personnalisé pour afficher une icône sous react:

import { IconName } from '@doing-ai/doing-ai-icons';

export const IconComponent = (icon, size = 20) => {
    return <img src={icon} alt="Name" width={size} height={size} />;
}

Icones Disponibles

Voici une liste de tous les icones disponibles dans la librairie :

| Icon Name | Preview | |-----------|---------| | Button | | | Key | | | Connector | | | UserEdit | | | Edit | | | ArrowRight | | | ArrowLeft | | | ArrowUp | | | ArrowDown | | | Users | | | BuIa | | | Code | | | Question | | | UserLock | | | Password | | | Info | | | Settings | | | Selector | | | CaretLeft | | | Diamond | | | SideElement | | | CaretRight | | | Suit | | | Archive | | | Message | | | Stat | | | DropdownArrow | | | Cloud | | | DocumentSlide | | | Network | | | Phone | | | Setting | | | Database | | | Plus | | | CheckMark | | | Error | |