Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/monster1935/vue-svg-icon
基于 Svg sprite 的svg icon方案实践
https://github.com/monster1935/vue-svg-icon
Last synced: about 1 month ago
JSON representation
基于 Svg sprite 的svg icon方案实践
- Host: GitHub
- URL: https://github.com/monster1935/vue-svg-icon
- Owner: monster1935
- Created: 2018-03-12T08:26:28.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-14T10:02:16.000Z (over 6 years ago)
- Last Synced: 2023-11-25T12:28:03.056Z (about 1 year ago)
- Language: JavaScript
- Size: 352 KB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-svg-icon
> 基于 svg-sprite 的 svg-icon 方案实践 Demo。在基于 vue-cli 生成的项目中，引入基于 svg-sprite 的 icon 方案。
**更新：该解决方案已经封装成npm包，可以通过npm install的方式直接安装使用。该demo仅作解决方案的示意。**
## npm安装地址
[svg-sprite-icon](https://www.npmjs.com/package/svg-sprite-icon)
## 在线预览
[预览，戳我](https://monster1935.github.io/vue-svg-icon/)
## 使用方式
一、安装 svg-sprite-loader, svgo, svgo-loader
```bash
npm install svg-sprite-loader --save-dev
npm install svgo svgo-loader --save-dev
```
二、配置webpack
假定icon路径存放在以 SvgIcon.vue 同级的文件夹 icons 中。
webpack.base.config.js
```javascript
// svgo 的精简规则配置文件
const svgoConfig = require('../config/svgo-config.json');
....
{
test: /\.svg$/,
include: [resolve('src/components/svg-icon/icons')],
use: [
{
loader: 'svg-sprite-loader',
options: {
symbolId: 'icon-[name]'
}
},
{
loader: 'svgo-loader',
options: svgoConfig,
}
]
},
...
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/components/svg-icon/icons')], // 避免 url-loader 重复处理该文件夹下的内容
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
```
svgo-config.json
```json
{
"plugins": [
{ "cleanupAttrs": true },
{ "cleanupEnableBackground": true },
{ "cleanupIDs": true },
{ "cleanupListOfValues": true },
{ "cleanupNumericValues": true },
{ "collapseGroups": true },
{ "convertColors": true },
{ "convertPathData": true },
{ "convertShapeToPath": true },
{ "convertStyleToAttrs": true },
{ "convertTransform": true },
{ "mergePaths": true },
{ "removeComments": true },
{ "removeDesc": true },
{ "removeDimensions": true },
{ "removeDoctype": true },
{ "removeEditorsNSData": true },
{ "removeEmptyAttrs": true },
{ "removeEmptyContainers": true },
{ "removeEmptyText": true },
{ "removeHiddenElems": true },
{ "removeMetadata": true },
{ "removeNonInheritableGroupAttrs": true },
{ "removeRasterImages": true },
{ "removeTitle": true },
{ "removeUnknownsAndDefaults": true },
{ "removeUselessDefs": true },
{ "removeUnusedNS": true },
{ "removeUselessStrokeAndFill": true },
{
"removeAttrs": { "attrs": "fill"}
},
{ "removeXMLProcInst": true },
{ "removeStyleElement": true },
{ "removeUnknownsAndDefaults": true},
{ "sortAttrs": true }
]
}
```
三、SvgIcon.vue 的使用
SvgIcon.vue
```javascript
// 引入所有的svg的文件
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('./icons', false, /\.svg$/);
requireAll(req);
export default {
name: 'svg-icon',
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
},
},
computed: {
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return `svg-icon ${this.className}`;
}
return 'svg-icon';
},
},
};
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
```
业务组件中使用SvgIcon.vue
```javascript
import SvgIcon from '../components/svg-icon/index';
div.icon-loading {
color: #cdcdcd;
}
```