WARNING: This Package is no longer maintained, Please use vue-symbol-icon instead.

@aidol/svg-icon

A Vue SVG Symbol icon component for svg-sprite-loader, Easy to custom SVG icon 's color and size!!!

TIPS: @aidol/svg-icon needs to be used in conjunction with svg-sprite-loader . So, please pre-install svg-sprite-loader and config it.

Features

• Ability to manipulate SVG icons. e.g. using font-size and color.
• Support Iconfont svg icons.

Installation

1# pnpm
2$ pnpm add @aidol/svg-icon
3
4# yarn
5$ yarn add @aidol/svg-icon
6
7# npm
8$ npm i @aidol/svg-icon

Usage

demo.vue

1<template>
2  <svg-icon icon-class="svg-symbol-id" font-size="36px" color="red" />
3</template>

Properties

Prop name	Default value	Required	Description	Type
icon-class	undefined	true	SVG Symbol Id which is SVG filename in the SVG folder.	string
className	undefined	false	Add Extra class name to SVG Element	string
color	undefined	false	Define SVG color	string
fontSize	undefined	false	Define SVG size	string

How to config svg-sprite-loader ?

In Vue CLI

1. First, you need config webpack with chainWebpack:

1// vue.config.js
2const path = require('path')
3
4function resolve(dir) {
5  return path.join(__dirname, dir)
6}
7
8module.exports = {
9  // ...
10  chainWebpack(config) {
11    
12    // Change the configuration of url-loader so that it does not process svg files used as icons in the specified folder
13    config.module
14      .rule("svg")
15      .exclude.add(resolve("src/icons"))
16      .end();
17
18    // Add svg-sprite-loader to process svg files in the specified folder
19    config.module
20      .rule("icons")
21      .test(/\.svg$/)
22      .include.add(resolve("src/icons"))
23      .end()
24      .use("svg-sprite-loader")
25      .loader("svg-sprite-loader")
26      .options({
27        symbolId: "icon-[name]"
28      })
29      .end();
30  }
31}

2. Then, place your .svg icon files in the src/icons/svg folder.

3. Defines the entry point for batch importing .svg modules:

1// src/icons/index.js
2
3import Vue from 'vue'
4import SvgIcon from '@aidol/svg-icon' // svg component
5
6// 1. register globally
7Vue.component('svg-icon', SvgIcon) 
8
9// 2. require svg files
10const req = require.context('./svg', false, /\.svg$/)
11const requireAll = requireContext => requireContext.keys().forEach(requireContext)
12requireAll(req)

4. Finally, these .svg files are centrally imported in the project entry file main.js.

1import Vue from 'vue'
2
3import '@/icons'
4
5new Vue({
6  // ...
7})

In Nuxt2

1. First, config webpack in the nuxt.config.js:

1// nuxt.config.js
2
3export default {
4  // ...
5  // Build Configuration (https://go.nuxtjs.dev/config-build)
6  build: {
7    /*
8     ** You can extend webpack config here
9     */
10    extend(config, { isClient }) {
11      if (isClient) {
12        const svgRule = config.module.rules.find((rule) =>
13          rule.test.test('.svg')
14        )
15        svgRule.exclude = [resolve('assets/icons/svg')]
16
17        // Includes /assets/icons/svg for svg-sprite-loader
18        config.module.rules.push({
19          test: /\.svg$/,
20          include: [resolve('assets/icons/svg')],
21          loader: 'svg-sprite-loader',
22          options: {
23            symbolId: 'icon-[name]',
24          },
25        })
26      }
27    },
28  }
29  // ...
30}

2. Centralize your *.svg icon files in the ~/assets/icons/svg folder.

3. Create a new ~/plugins/svg-icon.js file and write in it:

1import Vue from 'vue'
2import SvgIcon from '@aidol/svg-icon' // svg component
3
4// 1. register globally
5Vue.component('svg-icon', SvgIcon) 
6
7// 2. require svg files
8const req = require.context('~/assets/icons/svg', false, /\.svg$/)
9const requireAll = (requireContext) => requireContext.keys().forEach(requireContext)
10requireAll(req)

4. Configure the svg-icon plugin to nuxt.config.js:

1export default {
2  // ...
3
4  plugins: [
5    // ...
6    { src: '~/plugins/svg-icon', mode: 'client' }
7  ]
8
9  // ...
10}

CHANGE LOG

CHANGE LOG.