どのようにVUEのページ導入のSVGアイコン

アイコン表示を行うことで、一般的にダウンロードするだけで、簡単でのみ必要性を使用して、fontawesomeアイコンライブラリを使用して導入することができます。NPMフォント素晴らしい--saveをインストール

しかし、それはまた導入されたファイルを選択し、SVG、および、以下に示す特定のパッケージ構成をダウンロードし、使用アリババincofontの周りに発見されました。

整理するための既存のフレームワークの次の参照コード

：SRC /コンポーネントという名前SvgIcon、その後、SvgIconファイルフォルダ、新しいディレクトリindex.vueファイルをフォルダの下に作成した1、　　

<テンプレート> 
    <SVG：クラス= "svgClass" ARIA-隠された= "true"をV-上= "$リスナー"> 
        <使用：のxlink：hrefの= "iconName" /> 
    </ SVG> 
</テンプレート> 

<スクリプト> 
    エクスポートデフォルト{ 
        名： 'SvgIcon'、
        小道具：{ 
            iconClass：{ 
                タイプ：文字列、
                必須：真
            }、
            クラス名：{ 
                タイプ：文字列
                デフォルト： '' 
            } 
        }、
        計算：{ 

            iconName（）{ 
                リターン`＃icon- $ {この。iconClass} ` 
            }、 
            svgClass（）{
                もし（this.className）{ 
                    リターン'SVG-アイコン' + this.className 
                }他{ 
                    リターン'SVG-アイコン' 
                } 
            }、
            styleExternalIcon（）{ 
                リターン{ 
                    マスク： `URL（$ {} this.iconClass）ノー・リピート50％、50％ '、
                    '-webkitマスク'： `URL（$ {this.iconClass}）無反復の50％、50％` 
                } 
            } 
        } 
    } 
</ SCRIPT> 

<スタイルスコープ> 
    .SVGアイコン{ 
        幅： 1.5em; 
        高さ：1.5em; 
        垂直整列：-0.15em。
        塗りつぶし：currentColor。
        オーバーフロー：隠されました;
    } 

    .SVG-外部アイコン{ 
        背景色：currentColor。
        マスクサイズを：カバー重要;！
        表示：インラインブロック。
    } 
</スタイル>

2は、srcディレクトリに、新しいフォルダ、そして名前のアイコン、フォルダアイコンとは、SVGファイル内に保存されているSVGフォルダディレクトリindex.js SVGファイルとフォルダを追加します。

　　以下は、SRC /アイコン/ index.jsファイルの内容です：

インポート'VUE'からVUE 
SvgIconからインポート'@ /コンポーネント/ SvgIcon' SVG成分// 
グローバルアセンブリに登録// 
Vue.component（ 'SVG-アイコン'、SvgIcon）
CONST require.context REQ =（ './ SVG' 、falseに、/\.svg$/）
のconst = requireContext requireAll => requireContext.keys（）。地図（requireContext）
requireAll（REQ）

3、vue.config.jsファイル、構成ファイル、SVG、前記コンテンツ内部chainWebpack構成SVGで

module.exportsは= { 
    devServer：{ 
        ポート：8000 
    }、
    configureWebpack：{ 
        名：プロジェクト名、
        解決：{ 
            別名：{ 
                '@'：解決（ 'SRC'）、
                'ビュー'：解決（ 'SRC /ビュー'）
            } 
        } 
    }、
    chainWebpack（設定）が{ 
        config.module 
            .rule（ 'SVG'） 
            （リゾルブ（ 'SRC /アイコン'））.exclude.add 
            .END（）
        config.module 
            .rule（ 'アイコン'）
            .TEST（/ \ .SVG $ /）
            .include.add（解決（ 'SRC /アイコン'）））） 
            .END（）
            .USE（ 'SVG-スプライトローダ'）
            .loader（ 'SVG-スプライトローダ'）
            .OPTIONS（{ 
                symbolId： 'icon- [名前]' 
            }）
            .END（）
    } 
}

図4は、main.jsフォルダインコに直接導入しました

//グローバルなインコで導入された
インポート「@ / iconsThe」

5、incoClassという名前のファイル名のSVGに等しいページ、上で直接部品SVG-アイコンを使用して、

<SVGアイコンiconClass = "例" /> 
<SVGアイコンiconClass = "メッセージ" />

どのようにVUEのページ導入のSVGアイコン

おすすめ