IconSvg 使用说明
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run dev (开发环境打包 port:8080)
-
npm run test (测试用例)
-
npm run build (生产环境打包)
IconSvg参数
const data= {
"symbol":"arrowdown-nomal" //使用的svg图标名
,"style":{ //自定义样式
}
,"onClick": function(event,symbol) {
console.log(event); //输出e
console.log(symbol); //输出symbol
} /**点击后事件回调**/
,"onMouseEnter":function(event,symbol) {
console.log(event); //输出e
console.log(symbol); //输出symbol
} /**点击后事件回调**/
,"onMouseLeave":function(event,symbol) {
console.log(event); //输出e
console.log(symbol); //输出symbol
} /**点击后事件回调**/
}
IconSvg调用方法
- 引用组件
import IconSvg from '@beisen/IconSvg';
-
使用的组件安装
```
"svgo-loader": "^1.1.0",
"svg-sprite-loader": "",
```
- 根目录下简历 svgo-config.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 },
{ "removeXMLProcInst": true },
{ "removeStyleElement": true },
{ "removeUnknownsAndDefaults": true},
{ "sortAttrs": true }
]
}
```
- 传入参数
该参数为上述参数,传入方式使用: {...参数}
render () {
return (
<IconSvg {...data} />
)
}