图标 TmIcon

图标,可以是图片地址或者字体名称图标.也可以是你自定义的图标. 如何自定义图标呢:你可以在iconfont网站勾选图标->添加购物车->添加项目->项目设置,勾选woff2,勾选base64->下载本地->解压得到iconfont.css ->复制到你的app.vue全局中即可.然后使用图标时,font-family是你的图标名称比如myicon,prefix是图标前缀比如myicon-

🌶️ 示例

查看模拟效果＋

示例模板

vue

<template>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">文本 TmText</tm-text>
        <view>
            <tm-text>可以自定义图标,也可以使用内置图标库.</tm-text>
        </view>
    </tm-sheet>
    <tm-sheet class="gap-16 flex">
        <tm-icon name="home-4-fill"></tm-icon>
        <tm-icon name="ancient-gate-fill"></tm-icon>
        <tm-icon name="archive-2-fill"></tm-icon>
        <tm-icon name="verified-badge-fill"></tm-icon>
        <tm-icon name="printer-fill"></tm-icon>
    </tm-sheet>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">定义大小及颜色</tm-text>
        <view class="gap-16 flex">
            <tm-icon size="42" color="error" name="home-4-fill"></tm-icon>
            <tm-icon size="42" color="success" name="ancient-gate-fill"></tm-icon>
            <tm-icon size="42" color="#21d1c5" name="archive-2-fill"></tm-icon>
            <tm-icon size="42" color="warn" name="stack-fill"></tm-icon>
        </view>
    </tm-sheet>

    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">角度</tm-text>
        <view class="gap-16 flex">
            <tm-icon size="42" name="arrow-right-line"></tm-icon>
            <tm-icon size="42" rotate="90deg" name="arrow-right-line"></tm-icon>
            <tm-icon size="42" rotate="180deg" name="arrow-right-line"></tm-icon>
            <tm-icon size="42" rotate="270deg" name="arrow-right-line"></tm-icon>
        </view>
    </tm-sheet>

    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">旋转</tm-text>
        <view class="gap-16 flex">
            <tm-icon size="42" color="error" spin name="loader-line"></tm-icon>
        </view>
    </tm-sheet>

    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">图片图标</tm-text>
        <view class="gap-16 flex">
            <tm-icon size="42" color="error" name="https://tmui.design/images/logoGreat.png"></tm-icon>
            <tm-icon size="42" color="error" spin name="https://tmui.design/images/logoGreat.png"></tm-icon>
        </view>
    </tm-sheet>

    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">自定义图标</tm-text>
        <view class="gap-16 flex">
            <tm-icon font-family="myicon" prefix="myicon-" size="42" name="camera"></tm-icon>

            <tm-icon font-family="myicon" prefix="myicon-" size="42" name="music"></tm-icon>
            <tm-icon font-family="myicon" prefix="myicon-" size="42" name="phone"></tm-icon>
        </view>
    </tm-sheet>
</template>
<script setup lang="ts">
const testClick = (text: string) => {
    uni.showToast({ title: text, icon: "none" });
};
</script>
<style lang="scss"></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
_style	CSSStyleDeclaration\|string	""	-
_class	string	""	-
name	string	""	图标名称,可以是图片地址
size	number\|string	"32"	图标大小,默认32rpx
color	string	"#333333"	图标颜色
darkColor	string	"white"	暗黑时的图标颜色
spin	boolean	false	图标是否旋转
rotate	string	""	旋转角度
fontFamily	string	"remixicon"	-
prefix	string	"ri-"	-

🌹 事件

事件名	参数	返回数据	描述
click	-	-	点击事件

🌽 slot插槽

插槽名	数据	描述

🥗 ref方法

方法名	参数	返回值	描述

常用组件 ​

图标 TmIcon ​

🌶️ 示例 ​

🌶️ 兼容性 ​

🌱 参数 ​

🌹 事件 ​

🌽 slot插槽 ​

🥗 ref方法 ​

常用组件