subasicons v1.1.3
Subasicons
Biblioteca de icons creada para la plataforma de vmcsubastas
Empezemos: 🚀
Primero debemos instalar el paquete con npm
npm install subasicons
Vue 👨🏻💻
Todos los iconos estan optimizados y se importan individualmente desde 'subasicon/vue', si estás usando css, tailwindcss o cualquier otro frameworks, puedes agregarle las clases directamente al componente
<script>
import { AlertIcon } from 'subasicons/vue';
export default {
name: 'ComponentName'
components: {
AlertIcon
}
...
}
</script>
<template>
<div class="rounded p-3 ...">
<AlertIcon class="w-6 fill-yellow-300" />
<p class="text-gray-500 ...">...</p>
</div>
</template>
Agregar nuevos iconos ⚙️
Subasicons permite agregar nuevos iconos personalizados a la biblioteca, para esto debemos crear una carpeta ./icons
en la raiz y agregar todos tu iconos en formato svg. Se debe considerar que el nombre de los iconos deberá usar la notación kebab-case, por ejemplo: arrow-rounded-left.svg
Optimizar Icons 🗜
Antes de realizar la construcción de tus iconos deberás optimizarlos para eliminar los atributos innecesarios y así reducir el tamaño de los archivos. Para ello puede ejecutar el siguiente comando:
npm run optimized:icons
Al ejecutar este comando los nuevos iconos serán agregados en la carpeta ./optimized/icons
.
Construir 🏗
Para construir la biblioteca de iconos debes ejecutar el siguiente comando:
npm run build
Y listo! 🎉
License 🔑
- MIT.