Gathering detailed insights and metrics for vue-symbol-icon
A Vue SVG Symbol icon component for using SVG sprites icons. Easy to customize SVG icon 's color and size!!!
Installations
npm install vue-symbol-iconDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.19.1
NPM Version
8.19.3
Score
57.1
Supply Chain
99
Quality
76
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
3
Vue
JavaScript
HTML
Vue (60.59%)
JavaScript (30.98%)
HTML (8.43%)
Developer
Download Statistics
Total Downloads
5,629
Last Day
7
Last Week
44
Last Month
217
Last Year
3,499
GitHub Statistics
2 Stars
38 Commits
2 Watching
4 Branches
1 Contributors
Bundle Size
7.92 kB
Minified
3.19 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
3.0.2
Package Id
vue-symbol-icon@3.0.2
Unpacked Size
70.12 kB
Size
13.25 kB
File Count
9
NPM Version
8.19.3
Node Version
16.19.1
Publised On
04 Dec 2023
Total Downloads
Cumulative downloads
Total Downloads
5,629
Last day
-66.7%
7
Compared to previous day
Last week
-35.3%
44
Compared to previous week
Last month
-48.6%
217
Compared to previous month
Last year
64.3%
3,499
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Versions
vue-symbol-icon
A Vue SVG Symbol icon component for using SVG sprites icons. Easy to customize SVG icon 's color and size!!!
TIPS:
vue-symbol-iconneeds to be used in conjunction withsvg-sprite-loader. So, please pre-install svg-sprite-loader and config it. Or use SVG symbols generated by other way. The current version requiresVue 3.
Features
- Using to display SVG symbols as icons.
- Ability to manipulate SVG icons. e.g. using
font-sizeandcolor. - Support Iconfont SVG symbol icons.
| Version | Support Vue Version | Docs |
|---|---|---|
v2 | v2 | 2.x |
v3 | v3 | main |
Installation
1# pnpm 2$ pnpm add vue-symbol-icon@next 3 4# yarn 5$ yarn add vue-symbol-icon@next 6 7# npm 8$ npm i vue-symbol-icon@next
Usage
1<template> 2 <svg-icon icon-class="svg-symbol-name" font-size="36px" color="red" /> 3 4 <!-- In v1.2.0 and above --> 5 <svg-icon name="svg-symbol-name" font-size="36px" color="red" /> 6</template>
In v2.x and above, you can use vue-symbol-icon as a global component via vue plugin:
1import Vue from 'vue' 2import SvgIcon from 'vue-symbol-icon' 3 4Vue.use(SvgIcon)
Or, Local registration:
1import { SvgIcon } from 'vue-symbol-icon' 2 3export default { 4 components: { 5 SvgIcon 6 } 7}
Plugin options
| Key | Type | Default value | Description |
|---|---|---|---|
globalComponentName (Added in v2.1.0) | string | SvgIcon | Define the global component name. |
symbolIdPrefix (Added in v2.1.0) | string | icon- | Set SVG symbol id prefix in global. |
Component properties
| Prop name | Default value | Description | Type | Added in |
|---|---|---|---|---|
name | undefined | SVG symbol name which is SVG filename in the SVG folder. | string | v1.2.0 |
symbolIdPrefix | undefined | SVG symbol id prefix. | string | v1.2.0 |
iconClass | undefined | alias of name | string | v1.1.0 |
className | undefined | Add Extra class name to SVG Element | string | v1.1.0 |
color | undefined | Define SVG color | string | v1.1.0 |
fontSize | undefined | Define SVG size | string/number | v1.1.0 |
size | undefined | Alias of fontSize | string/number | v2.2.0 |
width | undefined | Alias of fontSize | string/number | v2.2.0 |
:warning: TIPS, name and symbolIdPrefix form the Symbol id. Global plugin configuration has lower priority than component properties.
1<template> 2 <svg-icon symbol-id-prefix="icon-" name="symbol-name" /> 3</template>
It's look like:
1<svg><use href="#icon-symbol-name" /></svg>
How to config svg-sprite-loader ?
In Vue CLI
- First, you need config
webpackwithchainWebpack:
1// vue.config.js 2const path = require('path') 3 4function resolve(dir) { 5 return path.resolve(__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/svg")) 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/svg")) 23 .end() 24 .use("svg-sprite-loader") 25 .loader("svg-sprite-loader") 26 .options({ 27 symbolId: "icon-[name]" 28 }) 29 .end(); 30 } 31}
-
Then, place your
.svgicon files in thesrc/icons/svgfolder. -
Defines the entry point for batch importing
.svgmodules:
1// src/icons/index.js 2 3import SvgIcon from 'vue-symbol-icon' // svg component 4 5// 2. require svg files 6const req = require.context('./svg', false, /\.svg$/) 7const requireAll = requireContext => requireContext.keys().forEach(requireContext) 8requireAll(req) 9 10export const installIcons = (app) => { 11 app.use(SvgIcon) 12}
- Finally, these
.svgfiles are centrally imported in the project entry filemain.js.
1import { createApp } from 'vue' 2import App from './App.vue' 3import { installIcons } from '@/icons' 4 5const app = createApp(App) 6 7installIcons(app) 8 9app.mount('#app')
In Nuxt2
Please use nuxt-symbol-icons module. more details see it's docs.
CHANGE LOG
No vulnerabilities found.
No security vulnerabilities found.