vite svg 2 webfont
v3.4.0
Un plugin VITE qui génère des polices à partir de vos icônes SVG et vous permet d'utiliser vos icônes dans votre HTML.
vite-svg-2-webfont utilise le package webfonts-generator pour créer des polices dans n'importe quel format. Il génère également des fichiers CSS afin que vous puissiez utiliser vos icônes directement dans votre HTML, à l'aide de classes CSS.
npm i -D vite-svg-2-webfont
yarn add -D vite-svg-2-webfont
pnpm add -D vite-svg-2-webfont
Ajoutez le plugin au vite.config.ts avec la configuration recherchée et importez le module virtuel, pour injecter la police CSS icônes au bundle.
Ajoutez le plugin à votre tableau de plugin 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' ) ,
} ) ,
] ,
} ) ;Importez le module virtuel dans l'application
// main.ts
import 'virtual:vite-svg-2-webfont.css' ; Utilisez la police dans les modèles avec la classe de police d'icône et un nom de classe d'icône. Le nom de la classe de police par défaut est .icon et peut être remplacé en passant l'option de configuration baseSelector . Les noms de classe d'icônes sont dérivés de leur nom de fichier .svg et préfixés avec la valeur de classPrefix qui par défaut icon- .
Dans l'exemple ci-dessous, la classe add afficherait l'icône créée à partir du fichier {context}/add.svg
< i class =" icon icon-add " > </ i > Le plugin dispose d'une API composée d'un paramètre requis et de plusieurs paramètres facultatifs permettant de personnaliser entièrement la configuration du plugin.
stringsvg s'exécutera. Les fichiers SVG seront utilisés pour générer la police de l'icône.string['*.svg']string'iconfont' par défautstringpath.resolve(context, '..', 'artifacts')stringpath.join(dest, fontName + '.css') Type : string
Description : Chemin du modèle CSS personnalisé. Le générateur utilise des modèles de guidon. Le modèle reçoit des options de templateOptions avec les options suivantes:
string SRC - Valeur de la propriété src pour @font-face .object CodePoints - CodePoints des icônes au format hexadécimal. Les chemins de modèle par défaut sont stockés dans l'objet webfontsGenerator.templates .
webfontsGenerator.templates.css - Chemin de modèle CSS par défaut. Il génère des classes avec des noms basés sur des valeurs à partir d' options.templateOptions .webfontsGenerator.templates.scss - Chemin de modèle SCSS par défaut. Il génère Mixin webfont-icon pour ajouter des styles d'icônes. Il est sûr d'utiliser plusieurs fichiers générés avec des mixins ensemble.Voir webfont-generator # crsstemlate
stringcssDest par défautstringpath.join(dest, fontName + '.html')stringoptions.templateOptions avec les options suivantes:string - Styles générés avec le modèle CSS par défaut. ( cssFontsPath est changé en chemin relatif du htmlDest au dest )string[] - Noms des icônes.booleantruebooleanfalsenumber10e12number0booleanfalsenumberbooleanfalseboolean | string | string[]true générer tous les types de fichiers.false générer aucun fichier.'html' - générer un fichier html'css' - générer un fichier CSS'fonts' - générer des fichiers de police (en fonction des types demandés)falsestring | string[]svgttfwoffwoff2eot['eot', 'woff', 'woff2', 'ttf', 'svg']{ [key: string]: number }startCodepoint .string'icon-' par défautstring'.icon'{ [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };string'vite-svg-2-webfont.css'booleanfalsebooleanfalse Le plugin expose une API publique qui peut être utilisée à l'intérieur d'un autre plugins en utilisant le mécanisme de communication inter-plugine Rollup.
Méthodes actuellement disponibles:
Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>type - Un format de police généré par un pluginhref - un chemin vers une police générée
