Icon

SVG 制作的 Icon.

使用

  1. <m-icon 
  2.   path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'>
  3. </m-icon>

也可以支持多 path 多颜色：

  1. <m-icon 
  2.  paths="[{ 
  3.     color: '#F98080', 
  4.     path: 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'
  5.   }, 
  6.   { 
  7.     color: '#F95050', 
  8.     path: 'M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z'
  9.   }]">
  10. </m-icon>

Omi 中使用

JSX:

  1. <m-icon 
  2.   path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z' />

支持多 path 多颜色：

  1. <m-icon paths={[{
  2.   color: '#F98080',
  3.   path: 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'
  4. }, {
  5.   color: '#F95050',
  6.   path: 'M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z'
  7. }]} />

API

Props

NameTypeDefaultsDetails
pathsobject—支持多图标 path
pathstring—图标的 path 值
viewnumber1024视图大小
scalenumber2图标放大倍数
colorstringblack颜色
rotateboolfalse旋转动画