图标 Icon

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用

使用

API

安装使用

import { TiIcon } from '@titian-design/mobile-vue'

用法示例

基础用法

codesanbox

copy

code

<template>
  <div class="code-container" style="flex-direction: row">
    <TiIcon name="home" />
    <TiIcon name="arrange" />
    <TiIcon name="cart" />
    <TiIcon name="profile" />
  </div>
</template>

<script lang="ts" setup>
import { TiIcon } from 'titian-h5-vue';
</script>

图标颜色

codesanbox

copy

code

<template>
  <div class="code-container" style="flex-direction: row">
    <TiIcon name="home" color="rgb(7, 193, 96)" />
    <TiIcon name="home" color="blue" />
    <TiIcon name="home" color="#f00" />
  </div>
</template>

<script lang="ts" setup>
import { TiIcon } from 'titian-h5-vue';
</script>

图标尺寸

codesanbox

copy

code

<template>
  <div class="code-container" style="flex-direction: row">
    <TiIcon name="home" :size="20" />
    <TiIcon name="home" :size="30" />
    <TiIcon name="home" :size="40" />
    <TiIcon name="home" :size="50" />
  </div>
</template>

<script lang="ts" setup>
import { TiIcon } from 'titian-h5-vue';
</script>

自定义图标

codesanbox

copy

code

<template>
  <div class="code-container" style="flex-direction: row">
    <TiIcon name="home" />
    <TiIcon prefix="test" name="star-zhuanqu" />
    <TiIcon prefix="test" name="truckzhuanqu2" />
  </div>
</template>

<script lang="ts" setup>
import { TiIcon } from 'titian-h5-vue';
</script>

<style>
@font-face {
  font-family: 'test'; /* Project id 4222030 */
  src: url('//at.alicdn.com/t/c/font_4222030_asbhwh04xzj.woff2?t=1697008347581') format('woff2'),
    url('//at.alicdn.com/t/c/font_4222030_asbhwh04xzj.woff?t=1697008347581') format('woff'),
    url('//at.alicdn.com/t/c/font_4222030_asbhwh04xzj.ttf?t=1697008347581') format('truetype');
}

.test {
  font-family: 'test' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.test-discovery-zhuanqu2:before {
  content: '\e606';
}

.test-star-zhuanqu:before {
  content: '\e607';
}

.test-truckzhuanqu2:before {
  content: '\e608';
}

.test-square-zhuanqu:before {
  content: '\e609';
}
</style>

TiIcon API

属性 Properties

名称	类型	必填	默认值	说明	备注
name	string	是	-	Icon 名字	-
rotate	string	否	-	旋转	-
color	string	否	-	颜色	-
size	number | string	否	-	大小	-
hyphen	string	否	-	连接符	-
spin	boolean	否	false	旋转动画	-
prefix	string	否	-	类名前缀	-
icon-style	string	否	-	取值：'' lovely popular	-
ext-style	string | Record<string, string>	否	-	根节点样式	-

外部样式类 External Classes

类名	说明	备注
ext-class	扩展样式类名	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--icon-font-size	inherit	字体图标大小	-
--icon-color	inherit	字体图标颜色	-

图标展示

share

notice

intracity

delivery

checkbox-hollow

location

phone

user-account-setting

colon

error

right

list

view

recommend

speaker

profile

home

cart

connect

arrange

category

warning

share-hwq

save

qrcode

goods

link

picture

tabbar-cart

tabbar-home

tabbar-vip

tabbar-mine

tabbar-category

search

default-pic

rate-star

go-to-top

to-receive

mine-to-pay

to-refund

to-comment

to-deliver

camera-point

question

store

info

filter

stepper-minus

checked

minus

stepper-plus

plus

sort-inactive

arrow-down

required

arrow-up

arrow-right

address

scan

close

delete

nav-back