0

I would like to find a way to include an SVG file (social media icons) within my Vue components and then inline it to cut down on http requests.

In my last project I simply pasted the svg element directly into the Vue component like this which is not a sustainable method if I want to ever change that icon to something else:

<svg class="SocialIcons__twitter SocialIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
  </path>
</svg>

I believe this will require the use of the webpack configuration. Also where should the svg files be stored? In the public folder or the assets folder? Any pointers to how you handle including SVG in a vue-cli 3 project would be great!

GustavMahler
  • 657
  • 1
  • 6
  • 23
  • 1
    Possible duplicate of [Vue Cli 3 is not allowing me to process SVG's in Webpack](https://stackoverflow.com/questions/49459262/vue-cli-3-is-not-allowing-me-to-process-svgs-in-webpack) – Sphinx Sep 19 '18 at 17:37

1 Answers1

0

Creating a folder within the 'src' folder named 'statics' and putting all your svg and static files would work for you. They can be easily used inside your components. This worked for me. Try this and let me know if this worked for you. Following are the gist links to help you: https://gist.github.com/ayushgupta11/3285d6e3ea3e541c1826ec367987bbbf https://gist.github.com/ayushgupta11/2c9f954776bcbeab5099b843a79685fa

Ayush Gupta
  • 114
  • 6