vite-plugin-svg-icons 経由で SVG 画像を使用する

1.  vite -plugin-svg-iconsをインストールします

   
   
    
    
npm i vite-plugin-svg-icons -D
// また
yarn add vite-plugin-svg-icons -D
   
   
    
    

2.main.jsに導入する

import 'virtual:svg-icons-register'
   
   
    
    

3. SVG 画像フォルダーを構成する

好き：

4. vite.config.js で構成する

   
   
    
    
// import path,{ resolve } from 'path'
「パス」からパスをインポート
「vite-plugin-svg-icons」から{createSvgIconsPlugin}をインポートします

export default defineConfig ( (コマンド) => {
{を返す
プラグイン : [
createSvgIconsPlugin ({
// キャッシュするフォルダを指定
iconDirs : [パス。resolve (process.cwd ( ), 'src/assets/icons' )],
// symbolId 形式を指定
symbolId : '[名前]'
}))
]、
}

}))
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

5. 新しい svg パッケージ コンポーネントを作成します。パス参照: src\components\ svg-icon \index.vue

   
   
    
    
<テンプレート>
< svg :class = "svgClass" aria-hidden = "true" >
< use class = "svg-use" :href = "symbolId" />
</ svg >
</テンプレート>

<スクリプト>
import { defineComponent、計算済み } from 'vue'

デフォルトの defineComponent をエクスポートします({
名前 ：「SvgIcon」、
小道具 ：{
プレフィックス : {
タイプ :文字列、
デフォルト ：「アイコン」
}、
名前 : {
タイプ :文字列、
必須 :真
}、
クラス名 : {
タイプ :文字列、
デフォルト : ''
}
}、
セットアップ (小道具) {
const symbolId =計算( () => `# ${props.name} ` )
const svgClass =計算( () => {
if (小道具。クラス名) {
return `svg-icon ${props.className} `
}
'svg-icon'を返す
}))
return {シンボルID、svgClass}
}
}))
</スクリプト>
<スタイル スコープ>
.svg-アイコン {
vertical-align : - 0.1em ; /* アイコンのサイズはフォントサイズと同じに設定されており、スパンやその他のラベルの下端はフォントのベースラインに合わせられるため、下方向のオフセットを設定する必要があります視覚的な不揃い効果を修正する比率 */
fill: currentColor; /* 要素の色を定義します。currentColor は変数です。この変数の値は、現在の要素の色の値を表します。現在の要素が色の値を設定していない場合は、親要素から継承されます。 */
オーバーフロー : 非表示;
}
</スタイル>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

6. オンデマンドでインポートして使用する

   
   
    
    
<テンプレート>

< SvgIcon name = "issue" > </ SvgIcon >

</テンプレート>

＜スクリプト 設定＞
"@/components/SvgIcon.vue"から SvgIcon をインポートします。
</スクリプト>
   
   
    
    

7. グローバルな導入と使用

main.js に追加

   
   
    
    
「./components/svgIcon/index.vue」からsvgIconをインポートします

createApp (アプリ)。コンポーネント( 'svg-icon' , svgIcon)
   
   
    
    

1.  vite -plugin-svg-iconsをインストールします

   
   
  
  
npm i vite-plugin-svg-icons -D
// また
yarn add vite-plugin-svg-icons -D
   
   
  
  

2.main.jsに導入する

import 'virtual:svg-icons-register'
   
   
  
  

3. SVG 画像フォルダーを構成する

好き：

4. vite.config.js で構成する

   
   
  
  
// import path,{ resolve } from 'path'
「パス」からパスをインポート
「vite-plugin-svg-icons」から{createSvgIconsPlugin}をインポートします

export default defineConfig ( (コマンド) => {
{を返す
プラグイン : [
createSvgIconsPlugin ({
// キャッシュするフォルダを指定
iconDirs : [パス。resolve (process.cwd ( ), 'src/assets/icons' )],
// symbolId 形式を指定
symbolId : '[名前]'
}))
]、
}

}))
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

5. 新しい svg パッケージ コンポーネントを作成します。パス参照: src\components\ svg-icon \index.vue

   
   
  
  
<テンプレート>
< svg :class = "svgClass" aria-hidden = "true" >
< use class = "svg-use" :href = "symbolId" />
</ svg >
</テンプレート>

<スクリプト>
import { defineComponent、計算済み } from 'vue'

デフォルトの defineComponent をエクスポートします({
名前 ：「SvgIcon」、
小道具 ：{
プレフィックス : {
タイプ :文字列、
デフォルト ：「アイコン」
}、
名前 : {
タイプ :文字列、
必須 :真
}、
クラス名 : {
タイプ :文字列、
デフォルト : ''
}
}、
セットアップ (小道具) {
const symbolId =計算( () => `# ${props.name} ` )
const svgClass =計算( () => {
if (小道具。クラス名) {
return `svg-icon ${props.className} `
}
'svg-icon'を返す
}))
return {シンボルID、svgClass}
}
}))
</スクリプト>
<スタイル スコープ>
.svg-アイコン {
vertical-align : - 0.1em ; /* アイコンのサイズはフォントサイズと同じに設定されており、スパンやその他のラベルの下端はフォントのベースラインに合わせられるため、下方向のオフセットを設定する必要があります視覚的な不揃い効果を修正する比率 */
fill: currentColor; /* 要素の色を定義します。currentColor は変数です。この変数の値は、現在の要素の色の値を表します。現在の要素が色の値を設定していない場合は、親要素から継承されます。 */
オーバーフロー : 非表示;
}
</スタイル>
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

6. オンデマンドでインポートして使用する

   
   
  
  
<テンプレート>

< SvgIcon name = "issue" > </ SvgIcon >

</テンプレート>

＜スクリプト 設定＞
"@/components/SvgIcon.vue"から SvgIcon をインポートします。
</スクリプト>
   
   
  
  

7. グローバルな導入と使用

main.js に追加

   
   
  
  
「./components/svgIcon/index.vue」からsvgIconをインポートします

createApp (アプリ)。コンポーネント( 'svg-icon' , svgIcon)