NuxtJS에서 SVG 인라인을 사용하는 가장 좋은 패키지는 무엇입니까?

Question

HTML로 렌더링 할 수있는 NuxtJS에서 SVG 인라인을 사용하는 최상의 패키지를 찾았습니다. 나는이 패키지를 사용한다 : 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 중 하나와 함께 설치 :

<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> 

참조 : .vue 파일에

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

그리고 마지막으로 사용 예 :

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

는 그런 다음 웹팩 설정을 구성 더보기 : docs .