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.