vite svg 2 webfont
v3.4.0
Un complemento VITE que genera fuentes de sus iconos SVG y le permite usar sus iconos en su HTML.
vite-svg-2-webfont utiliza el paquete webfonts-generator para crear fuentes en cualquier formato. También genera archivos CSS para que pueda usar sus iconos directamente en su HTML, utilizando clases CSS.
npm i -D vite-svg-2-webfont
yarn add -D vite-svg-2-webfont
pnpm add -D vite-svg-2-webfont
Agregue el complemento al vite.config.ts con la configuración deseada e importe el módulo virtual, para inyectar la fuente CSS de los iconos al paquete.
Agregue el complemento a su matriz de complementos Vite Configs.
// 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 el módulo virtual en la aplicación
// main.ts
import 'virtual:vite-svg-2-webfont.css' ; Use la fuente en plantillas con la clase de fuente de iconos y un nombre de clase de icono. El nombre de clase de fuente predeterminado es .icon y se puede anular pasando la opción de configuración baseSelector . Los nombres de la clase de icono se derivan de su nombre de archivo .svg y se prefijan con el valor de classPrefix que de valor predeterminado es icon- .
En el siguiente ejemplo, la clase add mostraría el icono creado a partir del archivo {context}/add.svg
< i class =" icon icon-add " > </ i > El complemento tiene una API que consta de un parámetro requerido y múltiples parámetros opcionales que permiten personalizar completamente la configuración del complemento.
stringsvg . Los archivos SVG se utilizarán para generar la fuente del icono.string['*.svg']string'iconfont'stringpath.resolve(context, '..', 'artifacts')stringpath.join(dest, fontName + '.css') Tipo : string
Descripción : Ruta de la plantilla CSS personalizada. El generador usa plantillas de manillares. La plantilla recibe opciones de templateOptions junto con las siguientes opciones:
string SRC: valor de la propiedad src para @font-face .object - CodePoints of Icons en formato HEX. Las rutas de las plantillas predeterminadas se almacenan en el objeto webfontsGenerator.templates .
webfontsGenerator.templates.css - ruta de plantilla CSS predeterminada. Genera clases con nombres basados en valores de options.templateOptions .webfontsGenerator.templates.scss - ruta de plantilla SCSS predeterminada. Genera mezcla webfont-icon para agregar estilos de iconos. Es seguro usar múltiples archivos generados con mezclas juntas.Ver WebFonts-Generator#cSstemplate
stringcssDest predeterminadostringpath.join(dest, fontName + '.html')stringoptions.templateOptions junto con las siguientes opciones:string de estilos: estilos generados con la plantilla CSS predeterminada. ( cssFontsPath se cambia a una ruta relativa de htmlDest a dest )string[] - Nombres de iconos.booleantruebooleanfalsenumber10e12number0booleanfalsenumberbooleanfalseboolean | string | string[]true Genere todos los tipos de archivos.false no generar archivos.'html' - Genere un archivo HTML'css' - Genere el archivo CSS'fonts' : genere archivos de fuentes (según los tipos solicitados)falsestring | string[]svgttfwoffwoff2eot['eot', 'woff', 'woff2', 'ttf', 'svg']{ [key: string]: number }startCodepoint omitiendo duplicados.string'icon-'string'.icon'{ [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };string'vite-svg-2-webfont.css'booleanfalsebooleanfalse El complemento expone una API pública que se puede usar dentro de otros complementos utilizando el mecanismo de comunicación entre Plugin.
Métodos disponibles actualmente:
Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>type : un formato de fuente generado por un complementohref : un camino hacia una fuente generada
