svg-toolkit v1.0.3

svg-toolkit

SVG 工具包 UI

install

npm i --save svg-toolkit

usage

import SvgCore, {
  CheckBoxSvg,
  RadioSvg,
  getChildId,
  getChildName,
  getChildSelected
} from 'svg-toolkit';

<SvgCore
  svgModule={svgModule}
/>

props

SvgCore.propTypes = {
SvgCore.propTypes = {
  // svg module properties
  svgModule: PropTypes.shape({
    viewBox: PropTypes.string.isRequired,
    children: PropTypes.arrayOf(
      PropTypes.shape({
        path: PropTypes.string.isRequired,
        id: PropTypes.string.isRequired,
        name: PropTypes.string
      })
    ).isRequired,
    label: PropTypes.string
  }).isRequired,
  className: PropTypes.string,
  prefixCls: PropTypes.string,
  role: PropTypes.string,

  // childs properties
  childClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  childTabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  childRole: PropTypes.string,
  isChildSelected: PropTypes.func,

  onMouseOver: PropTypes.func,
  onMouseOut: PropTypes.func,
  onMouseMove: PropTypes.func,
  onClick: PropTypes.func,
  onKeyDown: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,

  // 前置补充元素
  beforeAddons: PropTypes.func,
  // 后置补充元素
  afterAddons: PropTypes.func
};

SvgCore.defaultProps = {
  prefixCls: 'svg-toolkit',
  role: 'none', // No role for svg
  childClassName: 'svg-toolkit__child-item'
};

Methods

import SvgCore from 'svg-toolkit';

// update
update = () => {
  this.svgCoreRef.updateChild('child-1', {
    style: 'fill: black; stroke: #ddff22;',
    'stroke-width': 20 // 20px
  });
}

<SvgCore
  svgModule={svgModule}
  ref={node => this.svgCoreRef = node}
/>

• updateChild(childId, options) 参数 childId 可以是 id 也可以是具体的 SVGElement

build tool

convert svg file to js

# ray-build@1.0.14 以后的版本
npm install -g ray-build

convert

svgtoolkit svgdir

changelog

changelog

Lecense

MIT