vue-svg-iconx

vue-svg-iconx

Svg icon component based on vue

Install

npm i vue-svg-iconx
npm i svg-sprite-loader svgo svgo-loader -D

How to use

webpack config (use vue-cli 3)

You need a directory to store your SVG icon files. For example: src/assets/icon

You may need to give your icon a prefix. For example: icon-

You can change them to whatever value you want

vue.config.js

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack(config) {
    config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/icon")) // This is your svg icon directory.
      .end();

    config.module
      .rule("svg-icon")
      .test(/\.(svg)(\?.*)?$/)
      .include.add(resolve("src/assets/icon")) // This is your svg icon directory.
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]" // This is your icon prefix
      })
      .end()
      .use("svgo-loader")
      .loader("svgo-loader")
      .options({
        externalConfig: resolve("svgo.yml") // svgo config file
      })
      .end();
  }
};

svgo.yml

plugins:
  - cleanupAttrs: true
  - removeDoctype: true
  - removeComments: true
  - removeTitle: true
  - removeDesc: true

OK, Let`s start!

import iconx from "vue-svg-iconx";

// Import all svg, svg-sprite-loader and svgo-loader will automatically handle them for you
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(require.context("@/assets/icon", false, /\.svg$/));

Vue.use(iconx);

<template>
  <div>
    <iconx name="loading"></iconx>

    Support rotate

    <iconx rotate name="loading" color="#000" size="100px"></iconx>
  </div>
</template>

Component props

• name <String>

  required: Yes.

  The value of name is equal to the file name of the svg you want to display.

• color <String>

  required: No

• size <String, Array>

  required: No

  example:

  <icon name="loading" size="50px"></icon>
  
  ->
  
  <svg style="font-size: 50px">...</svg>
  
  --------------------------------------------------------
  
  <icon name="loading" :size="['50px']"></icon>
  
  ->
  
  <svg style="width: 50px; height: 50px">...</svg>
  
  --------------------------------------------------------
  
  <icon name="loading" :size="['50px', '60px']"></icon>
  
  ->
  
  <svg style="width: 50px; height: 60px">...</svg>
  

• rotate <Boolean>

  required: No

Customizable

Support for custom component names and global icon prefixes when registering.

import iconx from "vue-svg-iconx";

Vue.use(iconx, {
  componentName: "icon" // default: iconx
  prefix: 'iconx-'      // default: icon-
});