vite svg 2 webfont
v3.4.0
SVG 아이콘에서 글꼴을 생성하고 HTML에서 아이콘을 사용할 수있는 Vite 플러그인.
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 글꼴을 번들에 주입하십시오.
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' ; 아이콘 글꼴 클래스와 아이콘 클래스 이름이있는 템플릿에서 글꼴을 사용하십시오. 기본 글꼴 클래스 이름은 .icon 이며 baseSelector 구성 옵션을 전달하여 재정의 할 수 있습니다. 아이콘 클래스 이름은 .svg 파일 이름에서 파생되며 icon- 의 기본값으로 classPrefix 의 값으로 접두사를 만듭니다.
아래 예제에서 add 클래스는 파일 {context}/add.svg 에서 생성 된 아이콘을 표시합니다.
< i class =" icon icon-add " > </ i > 플러그인에는 1 개의 필요한 매개 변수로 구성된 API와 플러그인 설정을 완전히 사용자 정의 할 수있는 여러 옵션 매개 변수로 구성됩니다.
stringsvg 파일을 찾기위한 글로벌 패턴이 실행됩니다. SVG 파일은 아이콘 글꼴을 생성하는 데 사용됩니다.string['*.svg']string'iconfont'stringpath.resolve(context, '..', 'artifacts')stringpath.join(dest, fontName + '.css') 유형 : string
설명 : 사용자 정의 CSS 템플릿의 경로. Generator는 핸들 바 템플릿을 사용합니다. 템플릿은 다음 옵션과 함께 templateOptions 에서 옵션을 수신합니다.
string - @font-face 에 대한 src 속성의 값.object - 16 진 형식의 아이콘 코드 포인트. 기본 템플릿의 경로는 webfontsGenerator.templates 객체에 저장됩니다.
webfontsGenerator.templates.css - 기본 CSS 템플릿 경로. options.templateOptions 에서 값을 기반으로 이름을 가진 클래스를 생성합니다.webfontsGenerator.templates.scss - 기본 SCSS 템플릿 경로. 아이콘 스타일을 추가하기 위해 Mixin webfont-icon 생성합니다. Mixins와 함께 여러 생성 된 파일을 사용하는 것이 안전합니다.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 스크리핑 복제에서 코드 포인트가 증가합니다.string'icon-'string'.icon'{ [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };string'vite-svg-2-webfont.css'booleanfalsebooleanfalse 플러그인은 롤업 인터 플러그 통신 메커니즘을 사용하여 다른 플러그인 내에서 사용할 수있는 공개 API를 노출시킵니다.
현재 사용 가능한 방법 :
Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>type - 플러그인으로 생성 된 글꼴 형식href 생성 된 글꼴로가는 길
