vite svg 2 webfont
v3.4.0
Ein vite -Plugin, das Schriftarten aus Ihren SVG -Symbole erzeugt und Ihre Symbole in Ihrem HTML verwenden.
vite-svg-2-webfont verwendet das webfonts-generator , um Schriftarten in jedem Format zu erstellen. Es generiert auch CSS -Dateien, sodass Sie Ihre Symbole direkt in Ihrem HTML mit CSS -Klassen verwenden können.
npm i -D vite-svg-2-webfont
yarn add -D vite-svg-2-webfont
pnpm add -D vite-svg-2-webfont
Fügen Sie das Plugin mit dem gewünschten Setup zum vite.config.ts hinzu und importieren Sie das virtuelle Modul, um das CSS -Schriftart der Symbole in das Bundle zu injizieren.
Fügen Sie das Plugin zu Ihrem Vite Configs -Plugin -Array hinzu.
// 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' ) ,
} ) ,
] ,
} ) ;Importieren Sie das virtuelle Modul in die App
// main.ts
import 'virtual:vite-svg-2-webfont.css' ; Verwenden Sie die Schriftart in Vorlagen mit der Icon -Schriftklasse und einem Symbolklassennamen. Der Standard -Schriftunterrichtsname lautet .icon und kann durch Übergeben der baseSelector -Konfigurationsoption überschrieben werden. Die Namen der Icon-Klassen stammen aus ihrem .svg Dateinamen und werden mit dem Wert von classPrefix vorangestellt, der standardmäßig mit icon- ausfällt.
Im folgenden Beispiel würde in der add -Klasse das aus der Datei {context}/add.svg erstellte Symbol angezeigt
< i class =" icon icon-add " > </ i > Das Plugin verfügt über eine API, die aus einem erforderlichen Parameter und mehreren optionalen Parametern besteht, damit das Plugin -Setup vollständig anpassen kann.
stringsvg -Dateien ausgeführt wird. Die SVG -Dateien werden verwendet, um die Symbolschrift zu generieren.string['*.svg']string'iconfont'stringpath.resolve(context, '..', 'artifacts')stringpath.join(dest, fontName + '.css') Typ : string
Beschreibung : Pfad der benutzerdefinierten CSS -Vorlage. Generator verwendet Lenkervorlagen. Die Vorlage empfängt Optionen von templateOptions zusammen mit den folgenden Optionen:
string -Wert der src Eigenschaft für @font-face .object - CodePoints von Icons im HEX -Format. Pfade der Standardvorlagen werden im webfontsGenerator.templates gespeichert. Templates -Objekt.
webfontsGenerator.templates.css - Standard CSS -Vorlagenpfad. Es generiert Klassen mit Namen basierend auf Werten aus options.templateOptions .webfontsGenerator.templates.scss - Standard -SCSS -Vorlagenpfad. Es generiert Mixin webfont-icon um Symbolstile hinzuzufügen. Es ist sicher, mehrere generierte Dateien mit Mixins zusammen zu verwenden.Siehe Webfonts-Generator#csStemplate
stringcssDeststringpath.join(dest, fontName + '.html')stringoptions.templateOptions sowie die folgenden Optionen:string - Styles, die mit einer Standard -CSS -Vorlage erzeugt werden. ( cssFontsPath wird von htmlDest nach dest in den relativen Weg geändert)string[] - Namen von Symbolen.booleantruebooleanfalse falschnumber10e12number0booleanfalse falschnumberbooleanfalse falschboolean | string | string[]true generieren alle Dateitypen.false erzeugt keine Dateien.'html' - Generieren Sie eine HTML -Datei'css' - CSS -Datei generieren'fonts' - Schriftdateien generieren (basierend auf den angeforderten Typen)false falschstring | string[]svgttfwoffwoff2eot['eot', 'woff', 'woff2', 'ttf', 'svg']{ [key: string]: number }startCodepoint Überspringen von Duplikaten.string'icon-'string'.icon'{ [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };string'vite-svg-2-webfont.css'booleanfalse falschbooleanfalse falsch Das Plugin enthält eine öffentliche API, die in einem anderen Plugins mit dem Rollup-Interplugin-Kommunikationsmechanismus verwendet werden kann.
Derzeit verfügbare Methoden:
Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>type - ein Schriftformat, das von einem Plugin erzeugt wirdhref - ein Weg zu einer erzeugten Schriftart
