TDesign文档中复制的图标代码用不了 不知道tdesign-icons-vue中有哪些可用组件 解决办法

最新推荐文章于 2023-10-18 14:51:39 发布
最新推荐文章于 2023-10-18 14:51:39 发布
阅读量471 收藏
点赞数
文章标签： vue.js tdesign 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/132712857
版权

今天想找个检索的图标
结果发现tdesign的官网真的 图标这里写的挺不友好的
在这里插入图片描述
这里很多图标代码直接通过tdesign-icons-vue包去引入 甚至都找不到

其实也很简单
大部分开发工具 对这里路径 都可以直接 按住Ctrl 然后点击进入
在这里插入图片描述
进来之后 这些包 我们再按着Ctrl 继续往下找 特别是这个global-config
在这里插入图片描述
这样 我们就能知道里面具体有哪些图标组件了
在这里插入图片描述

瑞晟技术服务中心-耿瑞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-material-design-icons：材料设计图标作为Vue单个文件组件
02-04
Vue材质设计图标组件 该库是Vue单文件组件的集合，用于呈现Material Design图标，该组件来自。 它还包括一些CSS，可帮助简化图标的缩放。 入门 安装套件 yarn add vue-material-design-icons 要么 npm i vue-...
vue-tabler-icons:完全可定制的免费SVG图标制作为Vue组件
04-28
Tabler图标作为Vue组件 预览图标 安装 yarn add vue-tabler-icons # or npm i vue-tabler-icons 用法 < script > // MyComponent.vue import { BoldIcon } from 'vue-tabler-icons' ; export default { ...
ant-design-vue按需引入icon以及组件
热门推荐
你华还是你华
05-12 2万+
大家好，我是Counterrr。 不忘初心 ，砥砺前行。共勉。
TDesign在按钮上加入图标组件
weixin_45966674的博客
08-29 1446
在实际开发中 我们经常会遇到例如 添加或者查询 我们需要在按钮上加入图标的操作 TDesign自然也有预备这样的操作 首先我们打开文档看到图标例如 我们先用某些图标 就可以点开下面的代码 可以看到 我们的图标大部分都是直接用tdesign-icons-vue 导入他的组件就可以了 而我们按钮设计了一个icon属性 我们可以设置一个函数 返回对应图标组件 参考代码如下 运行结果如下 这里 我们引入了SearchIcon图标组件 然后定义了一个renderIcon函数 返回SearchIcon
vue3按需引入Ant Design icon
FormAda的博客
11-30 3562
1.使用Ant Design图表库中的图标 1.1安装 npm install --save @ant-design/icons-vue 1.2修改文档版本 vue3项目使用2.x或3.x。 1.3 使用 （1）点击复制代码 （2）将复制的代码粘贴在你要使用的地方 （3）在script中引入 import { UserOutlined } from '@ant-design/icons-vue'; （4）若使用了setup语法糖即到此结束，没有使用则需要在c...
高质量 Vue 组件 Ant Design Vue
java_zhangfei的博客
07-13 2270
Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。
在QtDesigner中新建toolbar后添加Icon图片不显示问题
最新发布
zjw_0013893172772的博客
10-18 898
应该为 ToolButtonIconOnly（只显示按钮图标），实际误选为ToolButtonTextOnly（只显示按钮文字）的一种，因而选择的Icon图标不显示。
vue3+tdesign组件实现图片渲染
Z1014h的博客
07-05 383
vue3+tdesign组件实现图片渲染。
vue-simple-line-icons-Vuejs的简单线图标组件-Vue.js开发
05-27
:grinning_cat_with_smiling_eyes:SVG-简单线条图标这是简单线条图标的Vue组件，您可以仅通过道具选择SVG或字体图标。 默认情况下，组件:grinning_cat_with_smiling_eyes:SVG-简单线条图标这是简单线条图标的Vue组件...
bootstrap-icons-vue:一个用于Bootstrap图标的Vue组件库
05-09
Bootstrap图标Vue Bootstrap图标旨在与Bootstrap组件一起使用，从表单控件到导航。 但是，它们也可以在几乎任何项目中工作。 这是因为Bootstrap图标是SVG，因此它们可以快速轻松地缩放并可以使用CSS设置样式。 -该...
vue-jam-icons:果酱图标的VueJS组件
05-10
卡纸图标v2的VueJS组件开始使用通过npm安装$ npm install vue-jam-icons用法全局注册vue-jam-icons： // main.jsimport Vue from 'vue'import VueJamIcons from 'vue-jam-icons'Vue . use ( VueJamIcons ) 在自动...
关于Vue3 + antd vue引入iconfont报错的最终解决方案
fengGer的博客
03-21 1384
我觉得，大概原因是这样【关于引入iconfont时出现的问题，可能是因为iconfont.js文件没有通过export default导出default对象】，所以可以这样去写，在使用时使用iconfont.default来获取default对象。那么今天它的处理方案出来了，无意间发现，可以这么写,但是好像也没有毛用，跟直接写文件地址一个diao样子啊。按照以上示例写完以后，你会神奇的发现，报一个错【引入本地文件，线上地址OK】，没法处理，晕死~~~即可轻松地使用已有项目中的图标。
项目中引入icon代码报错 export ‘Icon‘ (imported as ‘Icon‘) was not found in ‘antd‘
洗刷先生的博客
01-05 2130
饮鸠止渴
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
朝阳39的博客
03-08 626
TDesign 实战模板——带性别图标的头像
微信小程序实现步骤条-类似vantweapp(二)-tdesign实现
qq_46199553的博客
10-24 1367
微信小程序步骤条
ant-desing-vue升级后Icon的动态调用及自建icon库的方法
zaojiaodabao的博客
12-01 877
antd3.x（ant-desing-vue）动态调用默认Icon的实现方法，超简单
VUE3 使用 Ant Design Vue的icon图标
weixin_42902260的博客
04-21 5942
安装： npm install --save @ant-design/icons-vue 2.在main入口文件引入，不想一个个一得导入，可直接循环导入即可 import { createApp } from 'vue' import App from './App.vue' import router from './router' import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' import * as .
安装和使用Ant Design Vue 图标库
Gblfy_Blog
04-19 5268
# 进入到web项目根目录 cd web #在cmd命令窗口执行 npm install @ant-design/icons-vue --save # 在main.ts引入 import {createApp} from 'vue' import App from './App.vue' import router from './router' import store from './store' import Antd from 'ant-design-vue'; import 'an
Ant Design Vue3.x中动态渲染icon图标
平行时空的猫
05-04 7892
前言 随着vue3成为默认版本，越来越多的开发者选择vue3进行项目的开发，UI组件库也对Vue3进行了适配，Ant Design Vue3.x升级后，icon图标的使用方式有了如下的改变： 要使用icon需要先引入后在以组件的形式使用： import { AppstoreOutlined, MessageOutlined, CalendarOutlined} from '@ant-design/icons-vue'; <AppstoreOutlined /> <MessageOutli
使用ng-zorro-antd组件库中的图标组件正确的代码是（ ）。
06-06
使用ng-zorro-antd组件库中的图标组件需要先在组件中引入IconModule，然后在html模板中使用`<i nz-icon type="图标名称"></i>`的方式来展示图标。其中，"图标名称"可以是ng-zorro-antd官方提供的图标名称，也可以是自定义的svg图标名称。下面是一个展示ng-zorro-antd官方提供的"搜索"图标的示例代码： 在组件中引入IconModule: ```typescript import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { SearchOutline } from '@ant-design/icons-angular/icons'; import { NzButtonModule } from 'ng-zorro-antd/button'; @NgModule({ imports: [CommonModule, NzIconModule, NzButtonModule], exports: [NzIconModule, NzButtonModule], }) export class AntdModule { constructor() { // 注册需要使用的图标 this.registerIcons(); } private registerIcons(): void { NzIconModule.addIcon( // 指定图标名称 'search', // 指定图标路径 SearchOutline, ); } } ``` 在html模板中使用图标组件: ```html <!-- 在这里展示搜索图标 --> <button nz-button nzType="primary"> <i nz-icon nzType="search"></i> Search </button> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值