vite svg 2 webfont
v3.4.0
SVGアイコンからフォントを生成し、HTMLでアイコンを使用できるViteプラグイン。
vite-svg-2-webfont webfonts-generatorパッケージを使用して、あらゆる形式のフォントを作成します。また、CSSファイルを生成して、CSSクラスを使用してHTMLで直接アイコンを使用できるようにします。
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 > プラグインには、必要なパラメーターと複数のオプションのパラメーターで構成されるAPIがあり、プラグインのセットアップを完全にカスタマイズできます。
stringsvgファイルを見つけるためのグローブパターンが実行されるディレクトリに解決するパス。 SVGファイルは、アイコンフォントを生成するために使用されます。string['*.svg']string'iconfont'stringpath.resolve(context, '..', 'artifacts')stringpath.join(dest, fontName + '.css')タイプ： string
説明：カスタムCSSテンプレートのパス。ジェネレーターは、ハンドルバーテンプレートを使用します。 THTテンプレートは、次のオプションとともにtemplateOptionsからオプションを受け取ります。
string - @font-faceのsrcプロパティの値。object - ヘックス形式のアイコンのコードポイント。デフォルトテンプレートのパスは、 webfontsGenerator.templatesオブジェクトに保存されます。
webfontsGenerator.templates.css - デフォルトのCSSテンプレートパス。 options.templateOptionsの値に基づいて名前を持つクラスを生成します。webfontsGenerator.templates.scss - デフォルトのSCSSテンプレートパス。 Mixin webfont-iconを生成して、アイコンスタイルを追加します。ミックスインを備えた複数の生成されたファイルを一緒に使用しても安全です。webfonts-generator＃csstemplateを参照してください
stringcssDeststringpath.join(dest, fontName + '.html')stringoptions.templateOptionsからOptionsを受信します。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 プラグインは、RollUp Inter-Plugin通信メカニズムを使用して別のプラグイン内で使用できるパブリックAPIを公開します。
現在利用可能な方法：
Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>type - プラグインによって生成されたフォント形式href生成されたフォントへのパス
