Ant Design的icon图标组件使用阿里图标矢量库iconfont

于 2024-05-13 16:52:29 发布
阅读量331 收藏 5
点赞数 8
文章标签： javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao970615/article/details/138806805
版权

步骤1

 需要单独下载依赖 ：npm i  @ant-design/icons

步骤2:

登录-阿里巴巴矢量图标库iconfont-阿里巴巴矢量图标库

按照如下步骤创建一个项目

步骤3：

将你想要的图标加入购物车

步骤4：

加入购物车后按照如下步骤把图标添加到创建好的项目

步骤5：

按照如下步骤把资源文件下载下来

步骤6：

下载下来后，只需要iconfont.js这个js文件

然后把iconfont.js这个文件放到我们实际项目的里面，也下图为例，我这里放到项目下的assets/iconfont/目录下面

步骤7：

封装一个Demo，在需要图标的地方调用这个Demo即可

步骤8：

下面是调用案例

效果图

Wild～～
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant design4.40 web组件库 ant design pro后台模板库（精细-完整）
12-26
Ant Design 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 ant design4.40-web组件库 是基于Axure ，参考Ant Design 的样式而设计的一套模板库，是产品经理必备套件库，Ant Design...
ant-design引入阿里图标的图标
qq_41834059的博客
09-04 5932
http://www.cnblogs.com/bldxh/p/6360064.html     https://www.jianshu.com/p/2934316a5899
antd design react 使用 IconFont 图标库
noeal的博客
06-21 1385
antd design react 使用 IconFont 图标库
探索Ant Design Icons：高效、美观的前端图标库
最新发布
gitblog_00024的博客
04-21 432
探索Ant Design Icons：高效、美观的前端图标库 项目地址:https://gitcode.com/fjc0k/ant-design-icons 在前端开发中，一套高质量的图标库能极大地提升用户体验和项目的整体美感。Ant Design Icons就是这样一款专为React设计的图标解决方案，它由蚂蚁金服开源并维护，与Ant Design风格紧密集成，提供了丰富的矢量图标资源。 项目简...
动态引入 antDesign 的图标，并注册为组件
pig_ning的博客
06-20 1961
【代码】动态引入 antDesign 的图标，并注册为组件。
【Ant Design】图标大全（网断专用）
是光の谢宣骞博客
09-14 1985
Ant Design的图标
Ant Design Icon图标使用
qq_43796489的博客
06-11 9784
1.安装@ant-design/icons图标组件包 npm add antd
AntDesign3.9Axure组件
06-01
整合了Axure 3.9常用资源库套件，包含导航、布局、各种按钮等，适合产品经理或与前端设计相关同学下载。
Ant Design Library一套精美得像视觉稿的 Axure 组件库 阿里腾讯都在用
01-16
仅支持 Axure 8.0 以上版本 > 让交互稿美美"搭" 一套精美得像视觉稿的 Axure 组件库 来自蚂蚁 Ant Design
Ant Design Library 3.0 Axure 组件库
10-09
Ant Design Library 3.0 一套精美得像视觉稿的 Axure 设计组件库
阿里设计规范AntDesign官方组件包XD.rar
10-20
阿里设计规范AntDesign官方组件包XD版本，AntDesignMobile Template V1.0；Ant.Design.Pro；Ant.Design.3.0.Components
ant design中如何在表头中加个Icon和排序,悬浮icon又触发Tooltip
SunnyRun
12-11 1万+
需求： ant design中的table中的thead支持**信息提示**和远程加载**排序**。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181211170441113.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9n...
前端学习（3340）：ant design中icon图标的使用
歌谣的博客
09-17 826
Ant Design Pro 菜单自定义 icon
热门推荐
钬码狼酷的博客
05-23 2万+
Ant Design Pro 官方文档说明在菜单中使用自定义的 icon 由于 umi 的限制，在router.config.js是不能直接只是用组件的，Pro 中暂时支持 使用ant.design本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会自动处理为一个 img 标签。 如果这样还不能满足需求，可以...
通用组件封装——iconfont 封装图标组件
qq_42966167的博客
03-20 577
iconfont 封装图标组件
前端学习（3339）：ant design中加上icon图标
歌谣的博客
09-17 2047
当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。 如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。 ReactDOM.render( <div> <Button type="primary" shape="circle" icon="search" /> <Button type="primary" shape="circle"> .
react native 0.70版本使用ant-design-mobile-rn及icons字体图标库
好巧的博客
09-14 3568
示例为全局使用的方式，官方文档的示例是按需引入的，因此全局使用的需要自己去 node_modules/@ant-design/react-native/lib/ 找对应的组件名称。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。android文件夹: android\app\src\main\assets。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
前端学习（3188）：ant-design的icon图标
歌谣的博客
07-15 1094
ant design vue使用图标
06-28
### 回答1： Ant Design Vue使用图标非常简单。您可以使用Ant Design Vue提供的Icon组件来添加图标。首先，您需要在项目中安装Ant Design Vue： ``` npm install ant-design-vue --save ``` 然后，您可以在Vue组件中使用Icon组件来添加图标。例如，要添加一个搜索图标，您可以这样做： ``` <template> <div> <a-icon type="search" /> </div> </template> ``` 这将在页面上显示一个搜索图标。您可以使用不同的type属性来显示不同的图标。Ant Design Vue提供了许多内置的图标类型，您可以在官方文档中查看它们的完整列表。如果您需要使用自定义图标，您可以将SVG文件导入到项目中，并使用Icon组件的component属性来指定SVG文件的路径。 希望这可以帮助您开始使用Ant Design Vue图标。 ### 回答2： Ant Design Vue 是一款基于 Vue.js 的 UI 组件库，该组件库提供了丰富的图标以及相应的使用方法，可以帮助我们快速搭建美观的页面。 使用 Ant Design Vue 的图标非常简单，我们只需要在需要使用图标的地方引入图标组件即可。 例如，如果我们需要使用“搜索”图标，我们可以通过以下方式进行引入： ```html <template> <a-icon type="search" /> </template> ``` 其中，我们使用 `a-icon` 组件来引入图标，并且通过 `type` 属性指定所需的图标，即 `"search"`。 除了使用 Ant Design Vue 内置的图标，我们还可以通过自定义图标来对其进行扩展。Ant Design Vue 提供了一个叫做 `Iconfont` 的组件来加载自定义图标。 使用 `Iconfont` 组件时，我们需要在其 `type` 属性中指定所需图标自定义字体库中的类名。例如，假如我们需要使用一个自定义的图标，其类名为 `icon-myIcon`，我们可以通过以下方式进行引入并展示该图标： ```html <template> <a-iconfont type="icon-myIcon" /> </template> ``` 需要注意的是，在使用自定义图标时，我们需要在项目中引入相应的字体文件，并且将其引入至 Ant Design Vue 的主题中。 Ant Design Vue 提供了许多美观、易用的图标供我们使用，并且还能够方便地进行自定义扩展。使用图标可以使页面更具美感和易读性，非常适合前端开发人员使用。 ### 回答3： Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，它非常强大、易于使用且充满活力。Ant Design Vue 能够帮助开发者快速构建高质量、响应式的 Web 应用程序。 在 Ant Design Vue 中，使用图标是非常简单的。Ant Design Vue 提供了一个丰富的图标库，开发者只需在需要使用图标的地方引入相应的图标即可。使用 Ant Design Vue 的图标可以让应用程序更加美观、易于识别和易于使用。 使用 Ant Design Vue 图标的步骤如下： 1. 在你的 Vue 项目中安装 Ant Design Vue 组件库。可以使用 npm 或 yarn 进行安装。 2. 在需要使用图标的组件中引入 Ant Design Vue 组件库： ```javascript import { Icon } from 'ant-design-vue'; ``` 3. 使用 `<a-icon>` 标签来设置图标。Ant Design Vue 的图标库包含了很多图标，你可以在官方文档中查看所有可用的图标。以下是一个使用 Ant Design Vue 图标的示例： ```vue <template> <div> <a-icon type="user" /> </div> </template> ``` 在上面的示例中，我们使用了 `<a-icon>` 标签来设置一个用户图标，该标签的 `type` 属性值为 `user`。 4. 可以通过添加 `style` 属性来设置图标的颜色、大小等属性。例如： ```vue <template> <div> <a-icon type="user" style="color: red; font-size: 24px;" /> </div> </template> ``` 在上面的示例中，我们设置了该图标的颜色为红色，字体大小为 24 像素。 总的来说，Ant Design Vue 的图标使用非常简单、易于定制，能够让应用程序更加美观、易于识别和易于操作。如果你正在开发一个 Vue.js 应用程序，不妨试试使用 Ant Design Vue 图标吧！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值