vite svg 2 webfont
v3.4.0
Plugin vite yang menghasilkan font dari ikon SVG Anda dan memungkinkan Anda menggunakan ikon Anda di HTML Anda.
vite-svg-2-webfont menggunakan paket webfonts-generator untuk membuat font dalam format apa pun. Ini juga menghasilkan file CSS sehingga Anda dapat menggunakan ikon Anda secara langsung di HTML Anda, menggunakan kelas CSS.
npm i -D vite-svg-2-webfont
yarn add -D vite-svg-2-webfont
pnpm add -D vite-svg-2-webfont
Tambahkan plugin ke vite.config.ts dengan pengaturan yang diinginkan, dan impor modul virtual, untuk menyuntikkan ikon font CSS ke bundel.
Tambahkan plugin ke array plugin Vite Configs Anda.
// 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' ) ,
} ) ,
] ,
} ) ;Impor modul virtual ke dalam aplikasi
// main.ts
import 'virtual:vite-svg-2-webfont.css' ; Gunakan font dalam templat dengan kelas font ikon dan nama kelas ikon. Nama kelas font default adalah .icon dan dapat ditimpa dengan melewati opsi konfigurasi baseSelector . Nama kelas ikon berasal dari nama file .svg mereka, dan diawali dengan nilai classPrefix yang default ke icon- .
Dalam contoh di bawah ini, kelas add akan menampilkan ikon yang dibuat dari file {context}/add.svg
< i class =" icon icon-add " > </ i > Plugin memiliki API yang terdiri dari satu parameter yang diperlukan dan beberapa parameter opsional yang memungkinkan untuk sepenuhnya menyesuaikan pengaturan plugin.
stringsvg akan dieksekusi. File SVG akan digunakan untuk menghasilkan font ikon.string['*.svg']string'iconfont'stringpath.resolve(context, '..', 'artifacts')stringpath.join(dest, fontName + '.css') Ketik : string
Deskripsi : Jalur template CSS khusus. Generator menggunakan templat setang. THT Template menerima opsi dari templateOptions bersama dengan opsi berikut:
string -Nilai properti src untuk @font-face .object Codepoints - Codepoints of Icons dalam format hex. Jalur templat default disimpan dalam objek webfontsGenerator.templates .
webfontsGenerator.templates.css - Jalur template CSS default. Ini menghasilkan kelas dengan nama berdasarkan nilai dari options.templateOptions .webfontsGenerator.templates.scss - Jalur template SCSS default. Ini menghasilkan mixin webfont-icon untuk menambahkan gaya ikon. Aman menggunakan beberapa file yang dihasilkan dengan mixins bersama -sama.Lihat Webfonts-Generator#CSStemplate
stringcssDest defaultstringpath.join(dest, fontName + '.html')stringoptions.templateOptions bersama dengan opsi berikut:string - Gaya yang dihasilkan dengan template CSS default. ( cssFontsPath diubah menjadi jalur relatif dari htmlDest ke dest )string[] - Nama ikon.booleantruebooleanfalse defaultnumber10e12number0booleanfalse defaultnumberbooleanfalse defaultboolean | string | string[]true menghasilkan semua jenis file.false menghasilkan tidak ada file.'html' - menghasilkan file html'css' - menghasilkan file CSS'fonts' - menghasilkan file font (berdasarkan jenis yang diminta)false defaultstring | string[]svgttfwoffwoff2eot['eot', 'woff', 'woff2', 'ttf', 'svg']{ [key: string]: number }startCodepoint melewatkan duplikat.string'icon-'string'.icon'{ [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };string'vite-svg-2-webfont.css'booleanfalse defaultbooleanfalse default Plugin ini memperlihatkan API publik yang dapat digunakan di dalam plugin lain menggunakan mekanisme komunikasi antar-plugin rollup.
Metode yang tersedia saat ini:
Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>type - Format font yang dihasilkan oleh pluginhref - jalur menuju font yang dihasilkan
