[Vue+Vite] vite-svg-loader 사용하기

 

 

svg파일을 사용해야하는데 

 

간편하게 사용할 수 있는 라이브러리를 찾았다. 

 

https://www.npmjs.com/package/vite-svg-loader

vite-svg-loader

 

에 나와 있는 사용 설명대로 설치하면됨 

 

npm install vite-svg-loader --save-dev

 

 

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

 

 

 

그리고 

 

사용법은

 

 

<script>

import LogoIconGray from "../assets/logo-gray.svg";

export default {

  components: {

    LogoIconGray,

  },

};

</script>

 

1. 사용하고자하는 svg파일을 import한다. 

2. components에 추가 

     <div class="w-36">

          <LogoIconGray />

        </div>

 

컴포넌트 사용 

 

끝

 

간단하다.. 행복