vite svg 2 webfont
v3.4.0
Um plug -in Vite que gera fontes dos seus ícones SVG e permite que você use seus ícones no seu HTML.
vite-svg-2-webfont usa o pacote webfonts-generator para criar fontes em qualquer formato. Ele também gera arquivos CSS para que você possa usar seus ícones diretamente no seu HTML, usando as classes CSS.
npm i -D vite-svg-2-webfont
yarn add -D vite-svg-2-webfont
pnpm add -D vite-svg-2-webfont
Adicione o plug -in ao vite.config.ts com a configuração desejada e importe o módulo virtual para injetar a fonte CSS dos ícones no pacote.
Adicione o plug -in à sua matriz de plug -in de configurações Vite.
// vite.config.ts
import { resolve } from 'path' ;
import { defineConfig } from 'vite' ;
import viteSvgToWebfont from 'vite-svg-2-webfont' ;
export default defineConfig ( {
plugins : [
viteSvgToWebfont ( {
context : resolve ( __dirname , 'icons' ) ,
} ) ,
] ,
} ) ;Importar o módulo virtual para o aplicativo
// main.ts
import 'virtual:vite-svg-2-webfont.css' ; Use a fonte em modelos com a classe de fonte do ícone e um nome de classe de ícone. O nome da classe de fonte padrão é .icon e pode ser superestimado passando a opção de configuração baseSelector . Os nomes das classes de ícones são derivados do nome do arquivo .svg e prefixados com o valor do classPrefix , que padroniza o icon- .
No exemplo abaixo, a classe add exibiria o ícone criado a partir do arquivo {context}/add.svg
< i class =" icon icon-add " > </ i > O plug -in possui uma API que consiste em um parâmetro necessário e vários parâmetros opcionais, permitindo personalizar totalmente a configuração do plug -in.
stringsvg será executado. Os arquivos SVG serão usados para gerar a fonte do ícone.string['*.svg']string'iconfont'stringpath.resolve(context, '..', 'artifacts')stringpath.join(dest, fontName + '.css') Tipo : string
Descrição : Caminho do modelo CSS personalizado. O gerador usa modelos de guidão. O modelo recebe opções de templateOptions , juntamente com as seguintes opções:
string SRC-Valor da propriedade src para @font-face .object CodePoints - pontos CodePoints de ícones no formato hexadecimal. Os caminhos dos modelos padrão são armazenados no objeto webfontsGenerator.templates .
webfontsGenerator.templates.css - Caminho do modelo CSS padrão. Ele gera classes com nomes com base em valores do options.templateOptions .webfontsGenerator.templates.scss - Caminho do modelo SCSS padrão. Ele gera mixin webfont-icon para adicionar estilos de ícones. É seguro usar vários arquivos gerados com mixins.Consulte WebFonts-Generator#CSSTEMPLATE
stringcssDest padrãostringpath.join(dest, fontName + '.html')stringoptions.templateOptions , juntamente com as seguintes opções:string - Estilos gerados com modelo CSS padrão. ( cssFontsPath é alterado para o caminho relativo de htmlDest para dest )string[] - Nomes de ícones.booleantruebooleanfalsenumber10e12number0booleanfalsenumberbooleanfalseboolean | string | string[]true Gere todos os tipos de arquivos.false Gere não arquivos.'html' - gerar um arquivo html'css' - gerar arquivo CSS'fonts' - Gere arquivos de fonte (com base nos tipos solicitados)falsestring | string[]svgttfwoffwoff2eot['eot', 'woff', 'woff2', 'ttf', 'svg']{ [key: string]: number }startCodepoint .string'icon-'string'.icon'{ [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };string'vite-svg-2-webfont.css'booleanfalsebooleanfalse O plug-in expõe uma API pública que pode ser usada dentro de outro plug-ins usando o mecanismo de comunicação interplugin rollup.
Métodos atualmente disponíveis:
Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>type - um formato de fonte gerado por um plug -inhref - um caminho para uma fonte gerada
