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