Skip to content
On this page

组件库文档 tmui.design

图标 Icon

图标,提供了一个spin功能用于自动旋转图标在Nvue中使用原生动画

3.0.89+开始,允许自定图标,并且作了优化规则

因很多人看不懂规则,我现在重新写了个规则希望大家能看明白。按理是比较简单的。

  1. 下载字体图标,通过iconfont或者其它方式下载字体图标都行
  2. 图标的字体名称一定要与前缀相同,以iconfont项目设置为例:前缀myicon- ,字体名称:myicon
  3. 下载的图标包应该要包含:class的css文件以及ttf的base64文件(用于nvue安装)
  4. 引入好css图标,nvue安装好ttf base64图标文件
  5. 使用图标比如你有个图标名称叫music图标它的unicode符号为&#xe617.应该这么使用
ts
//这就是自定义图标的使用方法,这样在全平台都可显示。
<tm-icon name="myicon-music-e617"></tm-icon>

如何在nvue下安装base64位的ttf文件?

ts
import { onBeforeMount } from "vue"
// #ifdef APP-NVUE || APP-PLUS-NVUE
//customfont为你的base64的ttf字体内容
import { customfont } from "./customIcon/customiconfont";
var domModule = weex.requireModule("dom");
const animation = uni.requireNativePlugin("animation");
// #endif

// #ifdef APP-PLUS-NVUE
onBeforeMount(() => {
	//customfont为你的base64的ttf字体内容
  domModule.addRule("fontFace", {
    fontFamily: "myicon", //注意这里必须是驼峰命名,跟上面的css样式对照
    src: "url('data:font/ttf;charset=utf-8;base64," + customfont + "')",
  });
});
// #endif

介绍完毕,如果还看不懂,我也无能为力了


🌶️ 图标 Icon 示例

查看模拟效果
示例模板
vue
<template>
    <tm-app>
        <tm-sheet :margin="[32,32,32,16]">
            <tm-text :font-size="24" _class="font-weight-b" label="基本示例"></tm-text>
            <tm-divider></tm-divider>
            <view class="flex flex-row flex-wrap">
                <tm-icon  :font-size="50" name="tmicon-playcircle-fill"></tm-icon>
                <tm-icon color="primary" :font-size="50" name="tmicon-user-fill"></tm-icon>
                <tm-icon color="red" :font-size="50" name="tmicon-minus-circle-fill"></tm-icon>
            </view>
        </tm-sheet>
        <tm-sheet :margin="[32,0,32,16]">
            <tm-text :font-size="24" _class="font-weight-b" label="图片图标"></tm-text>
            <tm-divider></tm-divider>
            <view class="flex flex-row flex-wrap">
                <tm-icon color="red" :font-size="80" name="https://roundicons.com/wp-content/uploads/2017/09/PIzza-freebie-icon.png"></tm-icon>
                <tm-icon color="red" :font-size="80" name="https://roundicons.com/wp-content/uploads/2017/09/Rheindeer-freebie-icon.png"></tm-icon>
                <tm-icon color="red" :font-size="80" name="https://roundicons.com/wp-content/uploads/2017/09/Donut-freebie-icon.png"></tm-icon>
            </view>
        </tm-sheet>
		<tm-sheet :margin="[32,0,32,16]">
		    <tm-text :font-size="24" _class="font-weight-b" label="自定义图标"></tm-text>
		    <tm-divider></tm-divider>
		    <view class="flex flex-row flex-wrap">
		        <tm-icon customicon name="myicon-music-e617"></tm-icon>
		        <tm-icon customicon name="myicon-news-e618"></tm-icon>
		        <tm-icon customicon name="myicon-phone-e619"></tm-icon>
		    </view>
		</tm-sheet>
        <tm-sheet :margin="[32,0,32,16]">
            <tm-text :font-size="24" _class="font-weight-b" label="spin 旋转图标"></tm-text>
            <tm-divider></tm-divider>
            <tm-icon @click="spin=!spin" :spin="spin" :font-size="50" name="tmicon-shuaxin"></tm-icon>
        </tm-sheet>
		<tm-sheet :margin="[32,0,32,16]">
		    <tm-text :font-size="24" _class="font-weight-b" label="rotate-deg 旋转图标角度与spin不能混用"></tm-text>
		    <tm-divider></tm-divider>
			<view class="flex flex-row">
				<tm-button :margin="[24,0]" @click="deg+=90" label="+90deg"></tm-button>
				<tm-button :shadow="0" text :border="2" outlined :margin="[24,0]" @click="deg-=90" label="-90deg"></tm-button>
			</view>
		    <view class="pa-32">
				<tm-icon rotate :rotate-deg="deg"  :font-size="50" name="tmicon-angle-down"></tm-icon>
			</view>
		</tm-sheet>
        <tm-sheet :margin="[32,0,32,16]">
            <tm-text :font-size="24" _class="font-weight-b" :label="`部分参考图标(共${fontList.glyphs.length}个),前缀【tmicon-】`"></tm-text>
            <tm-divider></tm-divider>
            
            <tm-grid :col="4" :width="630">
                <tm-grid-item @click="onclick(item)" :height="140" v-for="(item,index) in list" :key="index">
                     <tm-icon :font-size="42" :name="item.name"></tm-icon>
                     <tm-text :label="item.text" :font-size="22"></tm-text>
                </tm-grid-item>
            </tm-grid>
			<!-- #ifndef MP -->
            <tm-button v-if="!showAll" block label="展示所有图标(过多会卡)" @click="onShowAll"></tm-button>
			<!-- #endif -->
        </tm-sheet>

    </tm-app>
</template>
<script lang="ts" setup>
import { ref,onMounted,onBeforeUnmount,onBeforeMount } from "vue"
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
import tmIcon from "@/tmui/components/tm-icon/tm-icon.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmGridItem from "@/tmui/components/tm-grid-item/tm-grid-item.vue"
import tmGrid from "@/tmui/components/tm-grid/tm-grid.vue"
import tmButton from "@/tmui/components/tm-button/tm-button.vue"
import fontList from '@/tmui/tool/tmicon/iconfont.json';
// #ifdef APP-NVUE || APP-PLUS-NVUE
import { customfont } from "./customIcon/customiconfont";
var domModule = weex.requireModule("dom");
const animation = uni.requireNativePlugin("animation");
// #endif
const spin = ref(true)
let showAll = ref(false);
const deg = ref(0)
const list = ref([])

//演示自定义图标
// #ifdef APP-PLUS-NVUE
onBeforeMount(() => {
  domModule.addRule("fontFace", {
    fontFamily: "myicon", //注意这里必须是驼峰命名,跟上面的css样式对照
    src: "url('data:font/ttf;charset=utf-8;base64," + customfont + "')",
  });
});
// #endif
onBeforeUnmount(()=>{
	list.value = [];
})
onMounted(()=>{
    uni.showLoading({title:"...",mask:true})
    let ls_list = fontList.glyphs.slice(0,30);
    setTimeout(() => {
         for(let i =0;i<ls_list.length;i++){
            list.value.push({name:fontList.css_prefix_text + ls_list[i].font_class,text:ls_list[i].name})
        }
        uni.hideLoading()
    }, 100);
   
})

//显示全部图标
const onShowAll = () => {
    showAll.value = true;
    let ls_list = fontList.glyphs;//全部显示
    list.value = [];
    uni.showLoading({title:"...",mask:true})
		for(let i =0;i<ls_list.length;i++){
            list.value.push({name:fontList.css_prefix_text + ls_list[i].font_class,text:ls_list[i].name})
        }
        uni.hideLoading()
}
function onclick(item){
    uni.setClipboardData({data:item.name}).then(()=>uni.showToast({title:"复制成功",icon:"none"}))
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
fontSize[Number]34图标大小
colorString''图标颜色
nameString''图标名称
spin[Boolean]true是否使图标旋转
unitv3.0.73+[String]rpx字号单位
rotate[Boolean]true是否允许单独控制图标旋转的角度
rotate-deg[Number]0图标旋转的角度

🌹 事件

事件名参数返回数据描述
click点击事件
longpress长按事件

🌽 slot插槽

默认default

🥗 ref方法

方法名参数返回值描述

😡 贡献者:小超1263375375