@beisen/icon-svg

0.0.3 • Public • Published

IconSvg 使用说明

项目运行

  1. cnpm install 或 npm install cnpm使用教程

  2. npm run dev (开发环境打包 port:8080)

  3. npm run test (测试用例)

  4. 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调用方法

  1. 引用组件
import IconSvg from '@beisen/IconSvg';
  1. 使用的组件安装

```
"svgo-loader": "^1.1.0",
"svg-sprite-loader": "",
```
  1. 根目录下简历 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 }
  ]
}
```
  1. 传入参数

该参数为上述参数,传入方式使用: {...参数}

render () {
    return (
      <IconSvg {...data} />
    )
  }

Package Sidebar

Install

npm i @beisen/icon-svg

Weekly Downloads

4

Version

0.0.3

License

ISC

Last publish

Collaborators

  • beisencorp