NuxtJSでSVGインラインを使用するのに最適なパッケージは何ですか？

Question

NuxtJSでSVGインラインを使用する最適なパッケージが見つかりました。このパッケージはHTMLにレンダリングできます。私はこのパッケージを使用します：svg-inline-loader。これはSVG HTMLを表示しますが、使用するドキュメントにすべてのSVGを挿入する必要があります：View this example SVGをレンダリングするには、<svg v-html="require('~/assets/sprite.svg')"></svg>のインサートが必要です。

あなたはSVGインラインを作るのにどんなパッケージが良いか知っていますか？

Answer 1

はい、vue-svg-loaderを使用してください。

npmかyarnのいずれかでそれをインストールします。

npm install --save-dev vue-svg-loader 
yarn add --dev vue-svg-loader 

を次に、あなたのWebPACKの設定を設定します。

あなた .vueファイル内

{ 
    test: /\.svg$/, 
    loader: 'vue-svg-loader' 
} 

そして最後に使用例：

<template> 
    <nav id="menu"> 
    <a href="..."> 
     <SomeIcon class="icon" /> 
     Some page 
    </a> 
    </nav> 
</template> 

<script> 
import SomeIcon from './assets/some-icon.svg'; 

export default { 
    name: 'menu', 
    components: { 
    SomeIcon, 
    }, 
}; 
</script> 

参照してください。その他：docs 。