Tantalum UI

Appearance

Return to top
On this page

Icon 图标

vue
<template>
  <ta-group title="基础用法">
    <div class="exp-icon-flex">
      <ta-row :gutter="[16, 16]">
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon" icon="UpOutlined"></ta-icon>
          <span class="exp-icon-text">UpOutlined</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon" icon="DownOutlined"></ta-icon>
          <span class="exp-icon-text">DownOutlined</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon" icon="LeftOutlined"></ta-icon>
          <span class="exp-icon-text">LeftOutlined</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon" icon="RightOutlined"></ta-icon>
          <span class="exp-icon-text">RightOutlined</span>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
  <ta-group title="大小">
    <div class="exp-icon-flex">
      <ta-row :gutter="[16, 16]" align="bottom">
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon" size="16" icon="CheckCircleOutlined"></ta-icon>
          <span class="exp-icon-text">16px</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon" size="24" icon="CheckCircleOutlined"></ta-icon>
          <span class="exp-icon-text">24px</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon" size="32" icon="CheckCircleOutlined"></ta-icon>
          <span class="exp-icon-text">32px</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon" size="40" icon="CheckCircleOutlined"></ta-icon>
          <span class="exp-icon-text">40px</span>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
  <ta-group title="颜色">
    <div class="exp-icon-flex">
      <ta-row :gutter="[16, 16]" align="bottom">
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon color-primary" icon="CheckCircleOutlined"></ta-icon>
          <span class="exp-icon-text">蓝色</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon color-success" icon="CheckCircleOutlined"></ta-icon>
          <span class="exp-icon-text">绿色</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon color-warning" icon="CheckCircleOutlined"></ta-icon>
          <span class="exp-icon-text">橙色</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon color-danger" icon="CheckCircleOutlined"></ta-icon>
          <span class="exp-icon-text">红色</span>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
  <ta-group title="颜色">
    <div class="exp-icon-flex">
      <ta-row :gutter="[16, 16]" align="bottom">
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon color-primary" :icon="QqSvg"></ta-icon>
          <span class="exp-icon-text">QQ</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon color-success" :icon="WechatSvg"></ta-icon>
          <span class="exp-icon-text">微信</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon color-warning" :icon="TaobaoSvg"></ta-icon>
          <span class="exp-icon-text">淘宝</span>
        </ta-col>
        <ta-col :span="6">
          <ta-icon class="exp-icon-icon color-danger" :icon="WeiboSvg"></ta-icon>
          <span class="exp-icon-text">微博</span>
        </ta-col>
      </ta-row>
    </div>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, markRaw } from 'vue'
import TaobaoSvg from '../../../assets/icons/taobao.svg?vueComponent'
import QqSvg from '../../../assets/icons/qq.svg?vueComponent'
import WechatSvg from '../../../assets/icons/wechat.svg?vueComponent'
import WeiboSvg from '../../../assets/icons/weibo.svg?vueComponent'

export default defineComponent({
  name: 'ExpIcon',
  setup() {
    return {
      TaobaoSvg: markRaw(TaobaoSvg),
      QqSvg: markRaw(QqSvg),
      WechatSvg: markRaw(WechatSvg),
      WeiboSvg: markRaw(WeiboSvg)
    }
  }
})
</script>

Import

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

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

Props

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

自定义 SVG 图标

Vite 导入 SVG

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

vite.config.js:

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

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

在单文件中：

vue
<template>
  <MyIcon />
  // or:
  <ta-icon :icon="MyIcon">
</template>

<script setup>
import MyIcon from './my-icon.svg?vueComponent'
</script>

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

批量导入 SVG

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

1. 安装 svg-sprites-cli

sh
npm i -D svg-sprites-cli

2. 通过指令执行：

sh
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:

js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

createApp(App).use(router).mount('#app')

4. Icon 组件通过展示

vue
<ta-icon icon="icon-homeTab" />

附录：示例图标库

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