Skip to content
This repository has been archived by the owner on Aug 22, 2023. It is now read-only.
/ aidol-svg-icon Public archive

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

License

Notifications You must be signed in to change notification settings

yisibell/aidol-svg-icon

Repository files navigation


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

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:
// 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();
  }
}
  1. Then, place your .svg icon files in the src/icons/svg folder.

  2. 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)
  1. 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]',
          },
        })
      }
    },
  }
  // ...
}
  1. Centralize your *.svg icon files in the ~/assets/icons/svg folder.

  2. 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)
  1. Configure the svg-icon plugin to nuxt.config.js:
export default {
  // ...

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

  // ...
}

CHANGE LOG

CHANGE LOG.