首先是Icon组件,毕竟这个东西后续很多组件需要用到 整体的目录
采用的阿里矢量库( 毕竟没有UI 只能用现成的了 )
需要传递的参数
interface IconProps {
name: string;
dot?: boolean;
badge?: string;
color?: string;
size?: string;
}
使用方式
<template>
<div>
<Icon name="fanhui" /><br/>
<Icon name="fanhui" dot /><br/>
<Icon name="fanhui" dot badge="10"/><br/>
<Icon name="fanhui" color="blue" /><br/>
<Icon name="fanhui" size="18" /><br/>
<Icon name="fanhui" size="24" /><br/>
<Icon name="fanhui" size="36" /><br/>
</div>
</template>
<script lang="ts" setup>
import { Icon } from "zgy-ui";
</script>
呈现效果
这是目前全部的Icon 后续统一整理并重命名
- 感叹号zgy-gantanhao
- 警告zgy-jinggao
- 缩小zgy-suoxiao
- 放大zgy-fangda
- 向左旋转zgy-rotate-left
- 向右旋转zgy-rotate-right
- 下拉zgy-xiala
- 上拉zgy-shangla
- selectzgy-select
- 50左翻页、左滑zgy-zuofanyezuohua
- 51右翻页、右滑zgy-youfanyeyouhua
- 省略号zgy-shenglvehao
- arrow-rightzgy-arrow-right
- arrow-leftzgy-arrow-left
- 图标-11zgy-tubiao-19
- 图标-09zgy-tubiao-20
- 图标-10zgy-tubiao-21
- 图标-14zgy-tubiao-22
- 图标-13zgy-tubiao-23
- 图标-12zgy-tubiao-24
- 图标-16zgy-tubiao-25
- 图标-17zgy-tubiao-26
- 图标-18zgy-tubiao-27
- 图标-02zgy-tubiao-28
- 图标-11zgy-tubiao-29
- 图标-08zgy-tubiao-30
- 图标-14zgy-tubiao-31
- 图标-16zgy-tubiao-32
- 图标-23zgy-tubiao-33
- 图标-05zgy-tubiao-34
- 图标-07zgy-tubiao-35
- 图标-16zgy-tubiao-36
- 加图标zgy-jiatubiao
- 图标zgy-tubiao6
- 云下载zgy-yunxiazai1
- 乒乓球zgy-tubiao8
- likezgy-tubiao9
- 图标_答zgy-tubiao_da
- 图标3zgy-tubiao10
- 图标6zgy-tubiao17
- 图标5zgy-tubiao18
- 图标9zgy-tubiao19
- 图标8zgy-tubiao22
- 图标11zgy-tubiao24
- 图标10zgy-tubiao25
- 图标4zgy-tubiao26
- 图标7zgy-tubiao28
- 图标2zgy-tubiao30
- 图标14zgy-tubiao32
- 图标15zgy-tubiao34
- 图标19zgy-tubiao45
- 图标21zgy-tubiao46
- 图标22zgy-tubiao47
- 图标23zgy-tubiao48
- 图标18zgy-tubiao49
- 图标24zgy-tubiao50
- 图标28zgy-tubiao51
- 图标29zgy-tubiao52
- 图标40zgy-tubiao53
- 图标41zgy-tubiao54
- 图标42zgy-tubiao55
- 图标46zgy-tubiao56
- 图标43zgy-tubiao57
- 图标48zgy-tubiao58
- Word相关zgy-Insert-Image
- 图标zgy-tubiao59
- 消息管理zgy-tubiao_
- 标签zgy-tubiao_biaoqian
- 我zgy-tubiao-37
- 扫二维码zgy-tubiao-38
- 客服zgy-tubiao-39
- 设置zgy-tubiao-40
- 分享zgy-tubiao-41
- 通知zgy-tubiao-42
- 查询zgy-tubiao-43
- 添加人zgy-tubiao-44
- 小旗旗zgy-tubiao-45
- targetzgy-tubiao-46
- 关闭zgy-tubiao-47
- 正确zgy-tubiao-48
- 不显示zgy-tubiao-49
- 解锁zgy-tubiao-50
- 收藏zgy-tubiao-51
- 应用zgy-tubiao-52
- QQzgy-tubiao-53
- 笔记zgy-tubiao-54
- 留言 2-4-2zgy-tubiao-55
- 更多 7-4-2zgy-tubiao-56
- 图标-译zgy-tubiao-yi
- 搜索zgy-sousuo1
- 标牌图标zgy-biaopaitubiao
- 元饼图图标zgy-yuanbingtutubiao
- 云图标zgy-yuntubiao
- 图片图标zgy-tupiantubiao1
- 鼠标图标zgy-shubiaotubiao
- 下载zgy-xiazai2
- 图标zgy-tubiao60
- 下载盘点单、下载打印模板zgy-cangpeitubiao_xiazaipandiandanxiazaidayinmoban
- 图标-01zgy-tubiao-01
- 图标-04zgy-tubiao-04
- 图标-10zgy-tubiao-101
- 图标-20zgy-tubiao-201
- 标签zgy-tubiao_biaoqian1
- 下载-文件下载-06zgy-xiazai-wenjianxiazai-06
- 下载-文件下载-09zgy-xiazai-wenjianxiazai-09
- 下载-文件下载-12zgy-xiazai-wenjianxiazai-12
- 下载-文件下载-13zgy-xiazai-wenjianxiazai-13
- 下载-文件下载-10zgy-xiazai-wenjianxiazai-10
- 下载-文件下载-27zgy-xiazai-wenjianxiazai-27
- 搜索文件zgy-sousuowenjian
- 云下载zgy-yunxiazai
- 闹钟zgy-naozhong
- 设置zgy-shezhi
- 搜索查询zgy-sousuochaxun
- 主页zgy-zhuye
- 编辑修改zgy-bianjixiugai
- 删除zgy-shanchu
- 刷新zgy-shuaxin
- 分享zgy-fenxiang
- 关联附件zgy-guanlianfujian
- 返回zgy-fanhui
- 进入zgy-jinru
- 减zgy-jian
- 加zgy-jia
- 关闭/错误zgy-guanbi
- 确认/正确/选择zgy-zhengque
- 打印zgy-dayin
- 文档zgy-wendang
- 内容/文档zgy-neirongwendang
- 全屏zgy-quanping
- 窗口放大zgy-chuangkoufangda
- 暂停zgy-zanting
- 图片zgy-tupian
- 播放zgy-bofang
- 文件夹zgy-wenjianjiai
- 通知zgy-tongzhi
- 拍照/相机zgy-paizhaoxiangji
- 搜索周边商家zgy-iconfontzhengzaidingwei
- 下载zgy-xiazai
- 下载zgy-xiazai1
- 搜索类目-fillzgy-sousuoleimufill
- 图标-35zgy-tubiao35
- 图标-37zgy-tubiao37
- 图标-38zgy-tubiao38
- 图标-42zgy-tubiao42
- 图标-43zgy-tubiao43
- 图标-44zgy-tubiao44
- 图标-36zgy-tubiao36
- 图标-39zgy-tubiao39
- 图标-44zgy-tubiao441
- 图标-04zgy-tubiao04
- 图标-06zgy-tubiao06
- 图标-09zgy-tubiao09
- 图标-12zgy-tubiao12
- 图标-14zgy-tubiao14
- 分享zgy-fenxiang-copy
- 编辑修改zgy-bianjixiugai-copy
- 图标-20zgy-tubiao20
- 图标-06zgy-tubiao061
- 图标-07zgy-tubiao07
- 图标-08zgy-tubiao08
- 图标-12zgy-tubiao121
- 图标-13zgy-tubiao13
- 图标-01zgy-tubiao01
- 图标-03zgy-tubiao03
- 图标-04zgy-tubiao041
- 图标-11zgy-tubiao11
- 图标-15zgy-tubiao15
- 图标-16zgy-tubiao16
- 图标-20zgy-tubiao201
- 图标-01zgy-tubiao011
- 图标-05zgy-tubiao05
- 图标-07zgy-tubiao071
- 图标-08zgy-tubiao081
- 图标-09zgy-tubiao091
- 图标-13zgy-tubiao131
- 图标-16zgy-tubiao161
- 图标-40zgy-tubiao40
- 图标-21zgy-tubiao21
- 图标-23zgy-tubiao23
- 图标-27zgy-tubiao27
- 图标-29zgy-tubiao29
- 图标-35zgy-tubiao351
- 图标-36zgy-tubiao361
- 图标-37zgy-tubiao371
- 图标-38zgy-tubiao381
- 图标-41zgy-tubiao41
- QQ图标zgy-qqtubiao
- 标题图标zgy-biaotitubiao
- 图标zgy-tubiao
- 图标-01zgy-tubiao012
- 图标1zgy-tubiao1
- 图标2zgy-tubiao2
- 图标-06zgy-tubiao062
- 图标-07zgy-tubiao072
- 图标7zgy-tubiao7
- 图标-11zgy-tubiao111
- 图标-12zgy-tubiao122
- 图标-14zgy-tubiao141
- 图标-23zgy-tubiao231
- 图标-31zgy-tubiao31
- 图标-33zgy-tubiao33
- 图片图标zgy-tupiantubiao
- 图标7zgy-tubiao71
- 搜索zgy-sousuo
- 218下载、导入zgy-xiazaidaoru
- 文件下载zgy-wenjianxiazai
- 视频下载zgy-shipinxiazai
- 保障zgy-tubiao-
- 首页zgy-tubiao-1
- 分类zgy-tubiao-2
- 展业 选中zgy-tubiao-3
- 热点zgy-tubiao-4
- 榜单zgy-tubiao-5
- 活动zgy-tubiao-6
- 有消息zgy-tubiao-7
- 提示zgy-tubiao-8
- 固收zgy-tubiao-9
- 团队zgy-tubiao-10
- 保障 选中zgy-tubiao-11
- 获客zgy-tubiao-12
- 消息zgy-tubiao-13
- 财富zgy-tubiao-14
- 图标_地图zgy-tubiao_ditu
- 地图图标zgy-ditutubiao
- 图标zgy-tubiao3
- 图标zgy-tubiao4
- 图标6zgy-tubiao5
- 图标-01zgy-tubiao-16
- 图标-02zgy-tubiao-17
- 图标-07zgy-tubiao-18
