게재 방법 <use> Webpack 및 Vue.js를 사용하여 SVG 기호를 입력 하시겠습니까?

Question

Vue.js와 함께 Webpack을 사용합니다.

<symbol id="someID"><path></symbol> 
<symbol id="otherID"><path></symbol> 

나는 SVG4Everybody - 플러그인이 같은 구조 사용하는 코드에서

:

<svg><use xlink:href="map.svg#someID"></svg> 

을하지만이가하는이 같은 형태의 모든 SVG 아이콘을 저장하는 map.svg 파일에서 Webpack은 SVG 스프라이트를 배포하지 않기 때문에 작동하지 않습니다. 이 상황에서해야 할 일은 무엇입니까? 감사!

---

웹팩 3.6.0 뷰 2.5.2

Answer 1

다음을 사용하여 HTML하는 SVG 스프라이트를 추가해야합니다 <object>

<object type="image/svg+xml" data="map.svg"> 
    Your browser does not support SVG 
</object>  

Your browser does not support SVG - 추가 한 후 오래된 브라우저

을위한 장애 복구 HTML 스프라이트, 스프라이트의 아이콘을 사용할 수 있습니다 :

<svg viewBox="0 0 24 24"> 
    <use xlink:href="map.svg#someID"> 
</svg>   

아이콘의 크기를 맞추려면 viewBox 옵션을 사용하십시오.