https://github.com/yisibell/vue-symbol-icon
A Vue SVG Symbol icon component for using SVG sprites icons. Easy to customize SVG icon 's color and size!!!
https://github.com/yisibell/vue-symbol-icon
iconfont nuxt svg svg-sprite-loader svg-sprites svg-symbol-icon symbol vue vue-component webpack
Last synced: about 2 months ago
JSON representation
A Vue SVG Symbol icon component for using SVG sprites icons. Easy to customize SVG icon 's color and size!!!
- Host: GitHub
- URL: https://github.com/yisibell/vue-symbol-icon
- Owner: yisibell
- License: mit
- Created: 2023-03-01T01:17:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-05T07:07:40.000Z (over 1 year ago)
- Last Synced: 2025-03-21T11:51:10.978Z (3 months ago)
- Topics: iconfont, nuxt, svg, svg-sprite-loader, svg-sprites, svg-symbol-icon, symbol, vue, vue-component, webpack
- Language: Vue
- Homepage: http://hongwenqing.com/vue-symbol-icon/
- Size: 696 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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-icon` needs to be used in conjunction with `svg-sprite-loader` . So, please pre-install [svg-sprite-loader](https://github.com/JetBrains/svg-sprite-loader) and config it. Or use SVG symbols generated by other way.
> The current version requires `Vue 3`. for `Vue 2`, pls use [2.x](https://github.com/yisibell/vue-symbol-icon/tree/2.x).
# Features
- Using to display **SVG symbols** as icons.
- Ability to manipulate SVG icons. e.g. using `font-size` and `color`.
- Support [Iconfont SVG symbol icons](https://www.iconfont.cn/).
| Version | Support Vue Version | Docs |
| :---: | :---: | :---: |
| `v2.x` | `v2` | [v2](https://github.com/yisibell/vue-symbol-icon/tree/2.x) |
| `v3.x` | `v3` | [v3](https://github.com/yisibell/vue-symbol-icon) |
# Installation
``` bash
# pnpm
$ pnpm add vue-symbol-icon
# yarn
$ yarn add vue-symbol-icon
# npm
$ npm i vue-symbol-icon
```
# Usage
``` vue
```
In `v2.x` and above, you can use `vue-symbol-icon` as a global component via vue plugin:
```js
import Vue from 'vue'
import SvgIcon from 'vue-symbol-icon'
Vue.use(SvgIcon)
```
Or, Local registration:
```js
import { SvgIcon } from 'vue-symbol-icon'
export default {
components: {
SvgIcon
}
}
```
# 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.
```vue
```
It's look like:
```html
```
# How to config **svg-sprite-loader** ?
## In `Vue CLI`
1. First, you need config `webpack` with `chainWebpack`:
``` js
// vue.config.js
const path = require('path')
function resolve(dir) {
return path.resolve(__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/svg"))
.end();
// Add svg-sprite-loader to process svg files in the specified folder
config.module
.rule("icons")
.test(/\.svg$/)
.include.add(resolve("src/icons/svg"))
.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:
``` js
// src/icons/index.js
import SvgIcon from 'vue-symbol-icon' // svg component
// 2. require svg files
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().forEach(requireContext)
requireAll(req)
export const installIcons = (app) => {
app.use(SvgIcon)
}
```
4. Finally, these `.svg` files are centrally imported in the project entry file `main.js`.
``` js
import { createApp } from 'vue'
import App from './App.vue'
import { installIcons } from '@/icons'
const app = createApp(App)
installIcons(app)
app.mount('#app')
```
## In Nuxt2
Please use [nuxt-symbol-icons](https://github.com/yisibell/nuxt-symbol-icons) module. more details see it's docs.
# CHANGE LOG