@aidol/svg-icon v2.1.4

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

# pnpm
$ pnpm add @aidol/svg-icon

# yarn
$ yarn add @aidol/svg-icon

# npm
$ npm i @aidol/svg-icon

Usage

demo.vue

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

Properties

How to config svg-sprite-loader ?

In Vue CLI

1. First, you need config webpack with chainWebpack:

// vue.config.js
const path = require('path')

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

module.exports = {
  // ...
  chainWebpack(config) {
    
    // Change the configuration of url-loader so that it does not process svg files used as icons in the specified folder
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();

    // Add svg-sprite-loader to process svg files in the specified folder
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  }
}

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

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

// src/icons/index.js

import Vue from 'vue'
import SvgIcon from '@aidol/svg-icon' // svg component

// 1. register globally
Vue.component('svg-icon', SvgIcon) 

// 2. require svg files
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().forEach(requireContext)
requireAll(req)

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

import Vue from 'vue'

import '@/icons'

new Vue({
  // ...
})

In Nuxt2

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

// nuxt.config.js

export default {
  // ...
  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, { isClient }) {
      if (isClient) {
        const svgRule = config.module.rules.find((rule) =>
          rule.test.test('.svg')
        )
        svgRule.exclude = [resolve('assets/icons/svg')]

        // Includes /assets/icons/svg for svg-sprite-loader
        config.module.rules.push({
          test: /\.svg$/,
          include: [resolve('assets/icons/svg')],
          loader: 'svg-sprite-loader',
          options: {
            symbolId: 'icon-[name]',
          },
        })
      }
    },
  }
  // ...
}

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:

import Vue from 'vue'
import SvgIcon from '@aidol/svg-icon' // svg component

// 1. register globally
Vue.component('svg-icon', SvgIcon) 

// 2. require svg files
const req = require.context('~/assets/icons/svg', false, /\.svg$/)
const requireAll = (requireContext) => requireContext.keys().forEach(requireContext)
requireAll(req)

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

export default {
  // ...

  plugins: [
    // ...
    { src: '~/plugins/svg-icon', mode: 'client' }
  ]

  // ...
}

CHANGE LOG

CHANGE LOG.