vite svg 2 webfont
v3.4.0
Плагин Vite, который генерирует шрифты из ваших значков SVG и позволяет использовать ваши значки в HTML.
vite-svg-2-webfont использует пакет webfonts-generator для создания шрифтов в любом формате. Он также генерирует файлы CSS, чтобы вы могли использовать свои значки непосредственно в HTML, используя классы CSS.
npm i -D vite-svg-2-webfont
yarn add -D vite-svg-2-webfont
pnpm add -D vite-svg-2-webfont
Добавьте плагин в vite.config.ts с разыгрывающей настройкой и импортируйте виртуальный модуль, чтобы ввести шрифт CSS CSS в пакет.
Добавьте плагин в свой массив плагинов VITE.
// 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' ; Используйте шрифт в шаблонах с классом шрифта значка и имени класса значков. Имя класса шрифта по умолчанию является .icon и может быть переопределено, передавая опцию конфигурации baseSelector . Имена классов значков получены от их имени файла .svg и префиксируются значением classPrefix , который по умолчанию по icon- .
В приведенном ниже примере класс add отобразит значок, созданный из файла {context}/add.svg
< i class =" icon icon-add " > </ i > Плагин имеет API, состоящий из одного необходимого параметра и нескольких дополнительных параметров, позволяющих полностью настроить настройку плагина.
stringsvg . Файлы SVG будут использоваться для генерации шрифта значка.string['*.svg']string'iconfont'stringpath.resolve(context, '..', 'artifacts')stringpath.join(dest, fontName + '.css') Тип : string
Описание : Путь пользовательского шаблона CSS. Генератор использует шаблоны руля. THT шаблон получает параметры от templateOptions вместе со следующими параметрами:
string -значение свойства src для @font-face .object - Codepoints of Icons в формате HEX. Пути шаблонов по умолчанию хранятся в объекте webfontsGenerator.templates .
webfontsGenerator.templates.css - путь шаблона по умолчанию. Он генерирует классы с именами на основе значений от options.templateOptions .webfontsGenerator.templates.scss - путь шаблона SCSS по умолчанию. Он генерирует Mixin webfont-icon , чтобы добавить стили значков. Это безопасно использовать несколько сгенерированных файлов вместе с микшинами.См. Webfonts-Generator#csstemplate
stringcssDeststringpath.join(dest, fontName + '.html')stringoptions.templateOptions вместе со следующими параметрами:string - стили, сгенерированные с шаблоном CSS по умолчанию. ( cssFontsPath изменяется на относительный путь от htmlDest до dest )string[] - Имена значков.booleantruebooleanfalsenumber10e12number0booleanfalsenumberbooleanfalseboolean | string | string[]true Создайте все типы файлов.false генерируйте нет файлов.'html' - генерировать HTML -файл'css' - генерировать файл CSS'fonts' - генерируйте файлы шрифтов (на основе запрошенных типов)falsestring | string[]svgttfwoffwoff2eot['eot', 'woff', 'woff2', 'ttf', 'svg']{ [key: string]: number }startCodepoint SPING DUPLICATES.string'icon-'string'.icon'{ [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };string'vite-svg-2-webfont.css'booleanfalsebooleanfalse Плагин разоблачает публичный API, который можно использовать внутри других плагинов, используя механизм связи между Pllup Inter-Plugin.
В настоящее время доступные методы:
Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>type - формат шрифта, генерируемый плагиномhref - путь к созданному шрифту
