Leo-icons NPM | npm.io

Vue Icon Library - leo-icons

¡Bienvenido a la librería de iconos para Vue.js! Esta librería incluye una serie de componentes de iconos personalizables para tus proyectos de Vue.js, con soporte para diferentes estilos como "Filled", "Lined", "Glass" y "Duoline".

Instalación

Para instalar la librería desde npm, ejecuta el siguiente comando:

npm install leo-icons

Uso Básico

Una vez que la librería esté instalada, puedes registrar los componentes globalmente o importarlos en tus componentes de Vue.

Registro Global

import { createApp } from 'vue'
import App from './App.vue'
import leoicons from 'leo-icons'

const app = createApp(App);
app.use(leoicons);

app.mount('#app');

Registro por Componente

<template>
  <HouseFilled :principal_color="'#000'" :size="64" />
</template>

<script>
import { HouseFilled } from 'tu-libreria-de-iconos';

export default {
  components: {
    HouseFilled,
  },
};
</script>

Props

Cada icono acepta las siguientes props para personalización:

Ejemplo

<template>
  //default 
  <HouseFilled />
  //personalizado
  <HouseFilled :principal_color="'#1E90FF'" :secondary_color="'#FF6347'" :stroke_width="3" :size="64" />
</template>

Este ejemplo renderiza el icono HouseFilled con un color principal azul, color secundario rojo, un grosor de línea de 3 píxeles y un tamaño de 64 píxeles.