iconSvg组件下
index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React, { Component } from 'react' import Svg, { Path } from 'react-native-svg' import Icons from 'app/files/font/iconfont.svg.js' import { rem } from '../util' const ICON_SIZE = { xxs: 15, xs: 18, sm: 21, md: 22, lg: 36 } export default class IconSvg extends Component { render() { const { type, width, height, size, style } = this.props return ( <Svg width={rem(width || ICON_SIZE[size] || 22)} height={rem(height || ICON_SIZE[size] || 22)} viewBox={Icons.viewBox[type] || '0 0 1024 1024'} style={{ ...style, }} > { Icons[type].map((path, i) => { return <Path key={i} d={path.d} fill={path.fill} /> }) } </Svg>; ) } } |
index.web.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React, { Component } from 'react' import Icons from 'app/files/font/iconfont.svg.js' import { rem } from '../util' const ICON_SIZE = { xxs: 15, xs: 18, sm: 21, md: 22, lg: 36 } export default class IconSvg extends Component { render() { const { type, width, height, size, style } =this.props return ( <svg width={rem(width||ICON_SIZE[size] ||22)} height={rem(height||ICON_SIZE[size] ||22)} viewBox={Icons.viewBox[type] ||'0 0 1024 1024'} style={{ ...style, }} > { Icons[type].map((path, i) => { return < path key={i} d={path.d} fill={path.fill} />} ) } </svg> ) } } |
iconfont.svg.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
export default{ wodeshoucang: [ { d: 'M288.581818 991.418182c-32.581818 18.618182-74.472727 4.654545-93.090909-27.927273-9.309091-13.963636-9.309091-27.927273-9.309091-46.545454l41.890909-265.309091-186.181818-190.836364C13.963636 432.872727 13.963636 390.981818 41.890909 363.054545c9.309091-9.309091 23.272727-18.618182 37.236364-18.618181l256-37.236364 111.709091-237.381818c18.618182-32.581818 55.854545-51.2 93.090909-32.581818 13.963636 4.654545 27.927273 18.618182 32.581818 32.581818l111.709091 237.381818 256 37.236364c37.236364 4.654545 65.163636 41.890909 60.509091 79.127272 0 13.963636-9.309091 27.927273-18.618182 37.236364l-186.181818 190.836364 41.890909 265.309091c4.654545 37.236364-18.618182 74.472727-55.854546 79.127272-13.963636 4.654545-32.581818 0-46.545454-9.309091L512 865.745455l-223.418182 125.672727z', fill: '#FFCD30', }, { d: 'M512 814.545455l246.690909 134.981818c4.654545 4.654545 9.309091 4.654545 13.963636 4.654545 13.963636 0 23.272727-13.963636 18.618182-27.927273l-46.545454-288.581818 204.8-204.8c4.654545-4.654545 4.654545-9.309091 4.654545-13.963636 0-13.963636-4.654545-23.272727-18.618182-27.927273l-279.272727-41.890909-121.018182-260.654545c0-4.654545-4.654545-9.309091-9.309091-9.309091-9.309091-4.654545-23.272727 0-32.581818 9.309091L372.363636 349.090909l-279.272727 41.890909c-4.654545 0-9.309091 4.654545-13.963636 4.654546-9.309091 9.309091-9.309091 23.272727 0 32.581818l204.8 204.8-46.545455 288.581818c0 4.654545 0 9.309091 4.654546 13.963636 4.654545 9.309091 18.618182 13.963636 32.581818 9.309091l237.381818-130.327272z m-223.418182 176.872727c-32.581818 18.618182-74.472727 4.654545-93.090909-27.927273-9.309091-13.963636-9.309091-27.927273-9.309091-46.545454l41.890909-265.309091-186.181818-190.836364C13.963636 432.872727 13.963636 390.981818 41.890909 363.054545c9.309091-9.309091 23.272727-18.618182 37.236364-18.618181l256-37.236364 111.709091-237.381818c18.618182-32.581818 55.854545-51.2 93.090909-32.581818 13.963636 4.654545 27.927273 18.618182 32.581818 32.581818l111.709091 237.381818 256 37.236364c37.236364 4.654545 65.163636 41.890909 60.509091 79.127272 0 13.963636-9.309091 27.927273-18.618182 37.236364l-186.181818 190.836364 41.890909 265.309091c4.654545 37.236364-18.618182 74.472727-55.854546 79.127272-13.963636 4.654545-32.581818 0-46.545454-9.309091L512 865.745455l-223.418182 125.672727z', fill: '#402916', }, ] } |
引用
|
1 |
<Svg style={style.othernextStepIcon} width='10' height='10' type='wodeshoucang' size='xs> |