vite svg 2 webfont下載-Vite vite svg 2 webfont源代碼下載

vite svg 2 webfont

字體下載

v3.4.0

下載

Vite-Svg-2-Webfont

一個Vite插件，該插件從您的SVG圖標中生成字體，並允許您在HTML中使用圖標。

vite-svg-2-webfont使用webfonts-generator軟件包以任何格式創建字體。它還生成CSS文件，因此您可以使用CSS類直接在HTML中使用圖標。

安裝

NPM

 npm i -D vite-svg-2-webfont

紗

 yarn add -D vite-svg-2-webfont

PNPM

 pnpm add -D vite-svg-2-webfont

用法

將插件添加到vite.config.ts中，並帶有所需的設置，並導入虛擬模塊，將圖標CSS字體注入捆綁包中。

Vite Config

將插件添加到您的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' ) ,
        } ) ,
    ] ,
} ) ;

導入虛擬模塊

將虛擬模塊導入應用程序

 // main.ts
import 'virtual:vite-svg-2-webfont.css' ;

將類名添加到HTML元素以使用字體

在模板中使用圖標字體類和圖標類名稱中的字體。默認字體類名是.icon ，並且可以通過baseSelector配置選項來覆蓋。圖標類名稱是從其.svg文件名派生的，並帶有classPrefix的值，該值默認為icon- 。

在下面的示例中， add類將顯示從文件{context}/add.svg創建的圖標

 < i class =" icon icon-add " > </ i >

配置

該插件的API由一個必需的參數和多個可選參數組成，允許完全自定義插件設置。

情境

必需的
類型： string
描述：解決目錄的路徑，其中將執行svg文件的Glog模式。 SVG文件將用於生成圖標字體。

文件

類型： string
描述：從上下文中添加到WebFont中的SVG文件的一系列globs
默認['*.svg']

字體名稱

類型： string
描述：字體名稱和字體文件的基本名稱。
默認'iconfont'

命運

類型： string
描述：生成字體文件的目錄。
默認path.resolve(context, '..', 'artifacts')
請參閱WebFonts-generator＃dest

CSSDest

類型： string
描述：生成的CSS文件的路徑。
默認path.join(dest, fontName + '.css')
請參閱WebFonts-generator＃cssdest

CSSTEMPLATE

類型： string
描述：自定義CSS模板的路徑。發電機使用車把模板。 Tht Template從templateOptions上接收選項以及以下選項：
- 字體名稱
- SRC string - @font-face的src屬性值。
- CodePoints object - 十六進制格式的圖標的編碼點。
默認模板的路徑存儲在webfontsGenerator.templates對像中。
- webfontsGenerator.templates.css - 默認的CSS模板路徑。它根據options.templateOptions的值生成具有名稱的類。
- webfontsGenerator.templates.scss - 默認SCSS模板路徑。它生成Mixin webfont-icon來添加圖標樣式。將多個生成的文件與Mixin一起使用是安全的。
請參閱WebFonts-generator＃csstemplate

CSScontext

請參閱WebFonts-generator＃csscontext

CSSFONTSURL

類型： string
描述：CSS文件中使用的字體路徑。
默認的cssDest

htmldest

類型： string
描述：生成的HTML文件的路徑。
默認path.join(dest, fontName + '.html')
請參閱WebFonts-generator＃htmldest

htmltemplate

類型： string
描述：HTML模板路徑。發電機使用車把模板。模板從options.templateOptions中接收選項。 TemplateOptions以及以下選項：
- 字體名稱
- 樣式string - 使用默認CSS模板生成的樣式。（ cssFontsPath已更改為從htmlDest到dest的相對路徑）
- 名稱string[] - 圖標的名稱。
請參閱WebFonts-generator＃htmltemplate

結紮

類型： boolean
描述：啟用或禁用結紮功能。
默認為true
請參閱WebFonts-generator＃綁紮

歸一化

類型： boolean
描述：通過將圖標縮放到最高圖標的高度來使圖標標準化。
默認false
請參閱svgicons2svgfont＃options normalize

圓形的

類型： number
描述：設置SVG路徑舍入。
默認10e12
請參閱svgicons2svgfont＃options Round

下降

類型： number
描述：字體下降。自己修復字體基線很有用。
默認值0
請參閱svgicons2svgfont＃optionsDescent

固定寬

類型： boolean
描述：創建最大輸入圖標寬度的單拼字體。
默認false
請參閱svgicons2svgfont＃options fixedWidth

Fontheight

類型： number
描述：輸出的字體高度（默認為最高輸入圖標的高度）。
請參閱svgicons2svgfont＃options fontheight

Centerhorizontally

類型： boolean
描述：計算字形的邊界並水平中心。
默認false
請參閱svgicons2svgfont＃optionscenterhorizontally

生成文件

類型： boolean | string | string[]
描述：設置要在開發過程中保存到系統的文件類型。
有效輸入：
- true生成所有文件類型。
- false生成沒有文件。
- 'html' - 生成一個HTML文件
- 'css' - 生成CSS文件
- 'fonts' - 生成字體文件（基於請求的類型）
默認false

類型

類型： string | string[]
描述：要生成的字體文件類型。可能的值：
- svg
- ttf
- woff
- woff2
- eot
默認['eot', 'woff', 'woff2', 'ttf', 'svg']
請參閱WebFonts-generator＃類型

codepoints

類型： { [key: string]: number }
描述：某些圖標的特定代碼點。沒有代碼點的圖標將從startCodepoint跳過重複項中增加代碼點。
請參閱WebFonts-generator＃codepoints

ClassPrefix

類型： string
描述：每個生成的圖標的CSS類前綴。
默認'icon-'
請參閱WebFonts-generator＃templateOptions

鹼基

類型： string
描述：將應用字體的CSS基礎選擇器。
默認'.icon'
請參閱WebFonts-generator＃templateOptions

格式化

類型： { [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };
描述：特定的每種格式任意選項將傳遞給發電機。格式和匹配生成器：
- SVG -SVGICONS2SVGFONT。
- TTF -SVG2TTF。
- WOFF2 -TTF2WOFF2。
- Woff -TTF2WOFF。
- EOT -TTF2EOT。
請參閱WebFonts-generator＃formatoptions