yisibell
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-iconneeds to be used in conjunction withsvg-sprite-loader. So, please pre-install svg-sprite-loader and config it.
Features
- Ability to manipulate SVG icons. e.g. using
font-sizeandcolor. - Support Iconfont svg icons.
Installation
# pnpm
$ pnpm add @aidol/svg-icon
# yarn
$ yarn add @aidol/svg-icon
# npm
$ npm i @aidol/svg-iconUsage
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
- First, you need config
webpackwithchainWebpack:
// 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();
}
}Then, place your
.svgicon files in thesrc/icons/svgfolder.Defines the entry point for batch importing
.svgmodules:
// 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)- Finally, these
.svgfiles are centrally imported in the project entry filemain.js.
import Vue from 'vue'
import '@/icons'
new Vue({
// ...
})In Nuxt2
- First, config
webpackin thenuxt.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]',
},
})
}
},
}
// ...
}Centralize your
*.svgicon files in the~/assets/icons/svgfolder.Create a new
~/plugins/svg-icon.jsfile 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)- Configure the svg-icon plugin to
nuxt.config.js:
export default {
// ...
plugins: [
// ...
{ src: '~/plugins/svg-icon', mode: 'client' }
]
// ...
}