Franq Assets

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 @grupo-franq-open-banking/assets 

Após a instalação, importe o arquivo CSS para usar os ícones no seu projeto:

import "@grupo-franq-open-banking/assets/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 '@grupo-franq-open-banking/assets/dist/icons.css'; // Importa o CSS dos ícones
import { aliases } from '@grupo-franq-open-banking/assets/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:

1. instale o pacote:

pnpm i @grupo-franq-open-banking/assets

2.No arquivo de configuração do Vuetify, importe o CSS e o mapeamento de ícones:

// src/plugins/vuetify.js
import '@grupo-franq-open-banking/assets/dist/icons.css'; // Importa o CSS dos ícones
import { aliases } from '@grupo-franq-open-banking/assets/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>