Tantalum UI

Icon 图标 

import { TaIcon, TaCol, TaRow, TaGroup } from '@/index'
import TaobaoSVG from '../../../assets/icons/taobao.svg?jsx'
import QqSVG from '../../../assets/icons/qq.svg?jsx'
import WechatSVG from '../../../assets/icons/wechat.svg?jsx'
import WeiboSVG from '../../../assets/icons/weibo.svg?jsx'

export default function ExpIcon() {
  return (
    <>
      <TaGroup title="基础用法">
        <div className="exp-icon-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon"
                icon="UpOutlined"
                data-index={1}
              ></TaIcon>
              <span className="exp-icon-text">UpOutlined</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon className="exp-icon-icon" icon="DownOutlined"></TaIcon>
              <span className="exp-icon-text">DownOutlined</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon className="exp-icon-icon" icon="LeftOutlined"></TaIcon>
              <span className="exp-icon-text">LeftOutlined</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon className="exp-icon-icon" icon="RightOutlined"></TaIcon>
              <span className="exp-icon-text">RightOutlined</span>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="大小">
        <div className="exp-icon-flex">
          <TaRow gutter={[16, 16]} align="bottom">
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon"
                size="16"
                icon="CheckCircleOutlined"
              ></TaIcon>
              <span className="exp-icon-text">16px</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon"
                size="24"
                icon="CheckCircleOutlined"
              ></TaIcon>
              <span className="exp-icon-text">24px</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon"
                size="32"
                icon="CheckCircleOutlined"
              ></TaIcon>
              <span className="exp-icon-text">32px</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon"
                size="40"
                icon="CheckCircleOutlined"
              ></TaIcon>
              <span className="exp-icon-text">40px</span>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="颜色">
        <div className="exp-icon-flex">
          <TaRow gutter={[16, 16]} align="bottom">
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon color-primary"
                icon="CheckCircleOutlined"
              ></TaIcon>
              <span className="exp-icon-text">蓝色</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon color-success"
                icon="CheckCircleOutlined"
              ></TaIcon>
              <span className="exp-icon-text">绿色</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon color-warning"
                icon="CheckCircleOutlined"
              ></TaIcon>
              <span className="exp-icon-text">橙色</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon color-danger"
                icon="CheckCircleOutlined"
              ></TaIcon>
              <span className="exp-icon-text">红色</span>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="颜色">
        <div className="exp-icon-flex">
          <TaRow gutter={[16, 16]} align="bottom">
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon color-primary"
                icon={QqSVG}
              ></TaIcon>
              <span className="exp-icon-text">QQ</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon color-success"
                icon={WechatSVG}
              ></TaIcon>
              <span className="exp-icon-text">微信</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon color-warning"
                icon={TaobaoSVG}
              ></TaIcon>
              <span className="exp-icon-text">淘宝</span>
            </TaCol>
            <TaCol span="6">
              <TaIcon
                className="exp-icon-icon color-danger"
                icon={WeiboSVG}
              ></TaIcon>
              <span className="exp-icon-text">微博</span>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
    </>
  )
}

Import 

import { TaIcon } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
iconstring | ReactNode是设置图标的名称（Sprite）或者传入自定义图标组件
sizenumber24否icon 的大小
widthnumber否icon 的宽度
heightnumber否icon 的高度
colorstring否icon 的颜色

自定义 SVG 图标

Vite 导入 SVG

Vite 开发者可以通过 rollup-plugin-svg-sprites 来将 SVG 作为 React 组件导入。

vite.config.js:

import svgSprites from 'rollup-plugin-svg-sprites'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    svgSprites({
      exclude: ['node_modules/**']
    })
  ]
})

在单文件中：

import QqSVG from './QqSVG.svg?jsx'

export function MyIcon() {
  return <TaIcon className="exp-icon-icon color-primary" icon={QqSVG} />
}

TypeScript 支持和更多用法可以查看文档。

批量导入 SVG

对于一个批量文件夹形式的图标集，可以通过 svg-sprites-cli 转为 js。

1. 安装 svg-sprites-cli 

npm i -D svg-sprites-cli

2. 通过指令执行： 

svgjs -d ./icons -o path/to/lib/svg.js

假设 icons 目录下有：

- icons
  - Tab
    - home.svg
    - find.svg
    - user.svg
  - loading.svg

默认规则转出来的 id 为 icon-homeTab, icon-findTab, icon-userTab, icon-loading。

3. 在入口中引入 js：

main.ts:

import { FC } from 'react'
import { TaButton } from 'tantalum-ui-mobile-react'
import 'tantalum-ui-mobile-react/es/style/index'

import 'path/to/lib/svg.js'

const App: FC = () => (
  <div className="App">
    <TaButton type="primary">Button</TaButton>
  </div>
)

export default App

4. Icon 组件通过展示 

<TaIcon icon="icon-homeTab" />

附录：示例图标库

组件示例使用了一套图标库，涵盖了一些日常使用图标，具体效果和使用方式可以查看 @arksjs/ui-icons。