DEV Community

loading...
Cover image for Design System - Icons for vue 3

Design System - Icons for vue 3

lakshmananarumugam profile image Lakshmanan Arumugam Updated on ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now the vue app is ready. Then go to your browser and open this url: http://localhost:8080/

Alt Text

Setup svg sprite icon.

The same code directory run the below command

$ vue add svg-sprite
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
/* 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')
  }
}
Enter fullscreen mode Exit fullscreen mode

After the above code replaced. kill and run the serve once again:

The page will be render below like the screenshot
Alt Text

That's all.

Reference for the code repo

Cover image by balazsketyi unsplash

Discussion (0)

Forem Open with the Forem app