Now a days every web application using svg icons for their project. because, svg give a detailed view, resolution, speed...etc., each one use different approach to load the svg icon in their project. but, I personally like this Convert all svg's into one sprite.svg approach
Refer this guide to know why i approach this pattern.
Initial project setup
First install the vue cli in your sysstem
$ npm install -g @vue/cli
-OR-
$ yarn global add @vue/cli
Create a vue project using vue cli
$ vue create svg-icon-setup
#choose: Vue 3 Preview (if you own setup your own configuration)
$ cd svg-icon-setup
$ yarn serve
Now the vue app is ready. Then go to your browser and open this url: http://localhost:8080/
Setup svg sprite icon.
The same code directory run the below command
$ vue add svg-sprite
For more info about this svg-sprint addon
Once the svg-sprite added into your project. the addon will create two files are:
- svg-icon-setup/src/components/SvgIcon.vue (Icon component)
- svg-icon-setup/vue.config.js (Build configuration)
Now, time to add our own svg icons inside src/assets the directory.
Replace the below code changes in the project
<!-- src/App.vue -->
<template>
<SvgIcon
name="facebook"
/>
<SvgIcon
name="twitter"
/>
<SvgIcon
name="tumblr"
/>
</template>
<script>
import SvgIcon from '@/components/SvgIcon'
export default {
name: 'App',
components: {
SvgIcon
}
}
</script>
/* vue.config.js */
module.exports = {
pluginOptions: {
svgSprite: {
/*
* The directory containing your SVG files.
*/
dir: 'src/assets/icons',
/*
* The reqex that will be used for the Webpack rule.
*/
test: /\.(svg)(\?.*)?$/,
/*
* @see https://github.com/kisenka/svg-sprite-loader#configuration
*/
loaderOptions: {
extract: true,
spriteFilename: 'img/icons.svg' // or 'img/icons.svg' if filenameHashing == false
},
/*
* @see https://github.com/kisenka/svg-sprite-loader#configuration
*/
pluginOptions: {
plainSprite: true
}
}
},
chainWebpack: config => {
config.module
.rule('svg-sprite')
.use('svgo-loader')
.loader('svgo-loader')
}
}
After the above code replaced. kill and run the serve once again:
The page will be render below like the screenshot
That's all.
Reference for the code repo
Cover image by balazsketyi unsplash
Top comments (0)