Design System - Icons for vue 3

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