安装

yarn add jui-icons

API-图标

| 属性名 | 描述 | 类型 | 默认值 | 版本 | | :------------ | ---------------- | -------------------- | --------- | ---- | | size | 图标大小 | number | 24 | - | | color | 图片颜色 | ColorValue | #5A6068 | - | | strokeWidth | Outline 的路径宽 | number | - | - | | svgStyle | svg 内部的样式 | ViewProps['style'] | - | - | | touchableSize | 可点击的范围大小 | number | 44 | - |

直接使用

import React from 'react'
import { SuccessOutline } from 'jui-icons'

const App: React.FC = () => {
  return <SuccessOutline size={20} color="#098" />
}

API-Icon

| 参数 | 说明 | 类型 | 默认值 | | ----------- | ------------------------------- | -------- | --------- | | name | 图标名称 | String | - | | fill | 填充颜色 | String | #000000 | | stroke | 轮廓颜色 | String | - | | xml | 传递 SVG xml 字符串，自定义图标 | String | - | | size | 大小 | Number | 26 | | width | 宽度(默认为size的值) | Number | 26 | | height | 高度(默认为size的值) | Number | 26 | | paths | SVG path d=paths | String[] | - | | color | 图标颜色(会覆盖fill属性) | String | - | | touchable | 是否可点击 | Boolean | false | | onPress | 点击事件回调 | Function | - |

图标组件通过 react-native-svg 支持 svg 图标，基于这一特性封装图标组件库，它不是基于字体文件封装的组件，相比字体图标组件易于扩展体积较小。

基础实例

import React from "react"
import  { Icon } from 'jui-icons';

export default function Demo() {
  return (
    <>
      <Icon name='apple' size={46} color='#50CB42' />
      <Icon name='apple' size={46} fill='red' />
    </>
  )
}

自定义图标轮廓颜色

import React from "react"
import  { Icon } from 'jui-icons';

export default function Demo() {
  return (
    <>
      <Icon name='apple' height={42} width={40} fill='#E3BD8D' stroke='#4d4030' />
      <Icon name='apple' height={42} width={40} fill='#E2D849' stroke='#FF9900' />
    </>
  )
}

自定义图标

import React from "react"
import  { Icon } from 'jui-icons';
import { View } from 'react-native';

export default function Demo() {
  return (
    <>
      <Icon
        size={30}
        paths={[
          "M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 25"
        ]}
      />
      <View style={{ width:5 , display:"inline-block"}}></View>
      <Icon
        size={30}
        paths={[
          'M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z'
        ]}
      />
      <View style={{ width:5 , display:"inline-block"}}></View>
      <Icon
        size={30}
        paths={[
          "M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 18 5H20C20.5523 5 21 5.44772 21 6V25C21 25.5523 20.5523 26 20 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 11 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 11.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 5 18.4477 5 19V25C5 25.5523 5.44772 26 6 26H8C8.55228 26 9 25.5523 9 25V19C9 18.4477 8.55228 18 8 18H6ZM24 14C23.4477 14 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 14.4477 26.5523 14 26 14H24Z"
        ]}
      />
    </>
  )
}

使用XML传递svg需要在@/asstes/fonts中传递颜色

	<Icon size={22} xml={encoding('#ffffff')} />

export function encoding(color) {
	return `
     <svg t="1681784439273" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16285" width="200" height="200"><path d="M64.094669 576c-14.336 0-28.672-5.12-39.936-14.336-27.648-22.016-32.256-61.952-10.24-89.6l256-320c24.064-25.6 65.024-27.136 90.624-2.56 22.528 21.504 26.624 55.808 9.216 81.92l-256 320c-11.776 15.36-30.208 24.576-49.664 24.576z" fill="${color}" p-id="16286"></path><path d="M320.094669 896c-19.456 0-37.888-9.216-50.176-24.576l-256-320c-22.016-27.648-17.408-67.584 10.24-89.6s67.584-17.408 89.6 10.24l256 320c22.016 27.648 17.408 67.584-10.24 89.6-10.752 9.728-24.576 14.336-39.424 14.336z m384.512 0c-14.336 0-28.672-5.12-39.936-14.336-27.648-22.016-32.256-61.952-10.24-89.6l256-320c24.064-25.6 65.024-27.136 90.624-2.56 22.528 21.504 26.624 55.808 9.216 81.92l-256 320c-11.776 15.872-30.208 24.576-49.664 24.576z" fill="${color}" p-id="16287"></path><path d="M960.606669 576c-19.456 0-37.888-9.216-50.176-24.576l-256-320c-24.064-25.6-23.04-66.048 2.56-90.624 25.6-24.064 66.048-23.04 90.624 2.56 2.56 2.56 4.608 5.632 6.656 8.704l256 320c22.016 27.648 17.408 67.584-10.24 89.6-10.752 9.216-25.088 14.336-39.424 14.336zM256.094669 512c0 35.328 28.672 64 64 64S384.094669 547.328 384.094669 512s-28.672-64-64-64S256.094669 476.672 256.094669 512zM448.606669 512c0 35.328 28.672 64 64 64s64-28.672 64-64-28.672-64-64-64-64 28.672-64 64zM640.606669 512c0 35.328 28.672 64 64 64s64-28.672 64-64-28.672-64-64-64-64 28.672-64 64z" fill="${color}" p-id="16288"></path></svg>
`
}