@rafaelpaludo/f-icons
v0.0.3
Published
Biblioteca de ícones personalizada
Downloads
15
Maintainers
Readme
F-icons
F-Icons é uma biblioteca de ícones personalizada para a web, gerada a partir de arquivos SVG. Os ícones são disponibilizados nos formatos .woff, .woff2, .ttf e acompanham um arquivo .css com classes pré-definidas para fácil utilização.
Instalação
npm i @rafaelpaludo/f-icons
Após a instalação, importe o arquivo CSS para usar os ícones no seu projeto:
import "@rafaelpaludo/f-icons/dist/icons.css";
Utilização
Para usar os ícones em seu HTML, basta adicionar a classe correspondente:
<i class="meu-icone nome-do-icone"></i>
Integração com o Vuetify 2
Siga os passos abaixo para integrar sua biblioteca de ícones ao Vuetify 2:
1.Importe o CSS gerado pelo Fantasticon e o arquivo de aliases:
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import '@rafaelpaludo/f-icons/dist/icons.css'; // Importa o CSS dos ícones
import { aliases } from '@rafaelpaludo/f-icons/dist/aliases.js'; // Importa as classes mapeadas
2.Configure o Vuetify para utilizar os ícones:
// src/plugins/vuetify.js
Vue.use(Vuetify);
export default new Vuetify({
icons: {
values: {
...aliases, // Mapeia os ícones dinamicamente
meuIcone1: 'f-{meu-icone-1}', // Exemplo de uso de um ícone específico
},
},
});
Agora você pode utilizar os ícones diretamente nos componentes Vuetify, como no exemplo abaixo:
<v-icon>$meuIcone1</v-icon>
Integração com Nuxt 3 e UnoCSS
Siga os passos abaixo para integrar sua biblioteca ao Nuxt 3 utilizando Vuetify 3 e UnoCSS:
- instale o pacote:
pnpm i @rafaelpaludo/f-icons
2.No arquivo de configuração do Vuetify, importe o CSS e o mapeamento de ícones:
// src/plugins/vuetify.js
import '@rafaelpaludo/f-icons/dist/icons.css'; // Importa o CSS dos ícones
import { aliases } from '@rafaelpaludo/f-icons/dist/aliases.js'; // Importa o mapeamento dos ícones
3.Adicione a configuração para o Vuetify dentro de um plugin Nuxt:
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.hook("vuetify:configuration", ({ vuetifyOptions }) => {
vuetifyOptions.icons = {
aliases: {
...aliases,
meuIcone1: 'f-{nome-do-icone-1}', // Exemplo de uso de um ícone específico
},
};
});
});
Agora os ícones podem ser utilizados em componentes Nuxt da seguinte forma:
<v-icon>$meuIcone1</v-icon>