Ant Design Icon图标使用

最新推荐文章于 2024-04-16 18:30:22 发布

艾迪蛋·

最新推荐文章于 2024-04-16 18:30:22 发布

阅读量9.7k

点赞数 3

文章标签： react

本文链接：https://blog.csdn.net/qq_43796489/article/details/117816305

版权

1.安装 @ant-design/icons 图标组件包

npm install --save @ant-design/icons

2.按需引入要使用的图标

import { PhoneOutlined } from '@ant-design/icons';

3.直接使用 (旋转90度的手机图标)

<PhoneOutlined style={{ fontSize: 20, color: 'red' }} rotate="90" />

4.Icon的参数

className	类名
style	样式（注意：{{}}&驼峰命名）
rorate	旋转度数
spin	旋转动画
twoToneColor	仅适用于双色风格的图标

优惠劵

艾迪蛋·

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Ant Design Icon图标使用

1.安装@ant-design/icons图标组件包npm add antd
复制链接

扫一扫

Axure AntDesign元件库

05-14

一套精美得像视觉稿的 Axure web组件库

AntDesign3.9Axure组件

06-01

整合了Axure 3.9常用资源库套件，包含导航、布局、各种按钮等，适合产品经理或与前端设计相关同学下载。

1 条评论您还未登录，请先登录后发表或查看评论

vue3按需引入Ant Design icon

FormAda的博客

11-30

3398

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...

前端学习（3188）：ant-design的icon图标

歌谣的博客

07-18

222

安装指定版本的ant-design-vue和指定版本的@ant-design/icons-vue 图标组件包

最新发布

gurenchang的博客

04-16

735

安装指定版本的ant-design-vue和指定版本的@ant-design/icons-vue 图标组件包

浅谈Ant Design Pro 菜单自定义 icon

01-18

Ant Design Pro 官方文档说明在菜单中使用自定义的 icon 由于 umi 的限制，在 router.config.js 是不能直接只是用组件的，Pro 中暂时支持使用 ant.design 本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会自动处理为一个 img 标签。如果这样还不能满足需求，可以自定义 getIcon 方法。如果你想使用 iconfont 的图标，你可以使用ant.desgin的自定义图标. 1. getIcon方法 /* eslint no-useless-escape:0

Ant Design Icon本地化（后台系统应用）

weixin_34360651的博客

05-31

425

本文主要解决：在内网/离网环境使用React+Ant Design进行项目开发时，Icon显示异常问题；离线使用IconFont步骤：一、先下载 iconfont 字体的方法： 1.访问阿里巴巴适量图标库网址进行下载，http://www.iconfont.cn/ 2.选择“图标库---所有图标”： 3.可以直接搜索想要的图标...

react: 动态设置ant-design/icons图标

mosowe

04-19

7217

antd 版本：V4 @ant-design/icons 版本： V4 在此版本中，icon的图标模式为标签形式，不像element那样可以通过改变class而改变icon的图标样式。在我使用umijs开发后端管理系统时候，需要用到动态的icon图标，系统配置的时候只会传递icon的标签名称，比如正常的图标标签为：<PlusCircleFilled />，系统存的是PlusCircleFilled string类型，我需要在页面上显示对应的图标。 1.创建一个icon.ts文件，内容如下： i

ant中图标的使用

lirtyuj的博客

07-18

493

【代码】ant中图标的使用。

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 Library 3.0 Axure 组件库

10-09

Ant Design Library 3.0 一套精美得像视觉稿的 Axure 设计组件库

Axure AntDesign3.9.x （ Axure8及以上亲测有效）

02-01

AntDesign3.9.x 企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。如何在 Axure 里使用 Ant Design Library： 1. 打开 Axure 软件，找到 Libraries ...

高版本ant-design动态引用icon

李剑一

01-06

699

高版本ant-design-vue不再支持a-icon组件，个人封装icon组件，通过 type 动态获取图标。

前端学习（3339）：ant design中加上icon图标

歌谣的博客

09-17

2043

当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。 ReactDOM.render( <div> <Button type="primary" shape="circle" icon="search" /> <Button type="primary" shape="circle"> .

antdesign 动态引入icon

R的博客

02-16

2476

第一步: 创建一个icon.js文件,写一个自定义组件 // ICON.js import { createVNode } from 'vue' import * as $Icon from '@ant-design/icons-vue' export const Icon = props => { const { icon } = props; return createVNode($Icon[icon]); }; 第二步: 视图中引入即可注意: 引入的icon必须为大写 <t

Ant Design Vue3.x中动态渲染icon图标

平行时空的猫

05-04

7732

前言随着vue3成为默认版本，越来越多的开发者选择vue3进行项目的开发，UI组件库也对Vue3进行了适配，Ant Design Vue3.x升级后，icon图标的使用方式有了如下的改变：要使用icon需要先引入后在以组件的形式使用： import { AppstoreOutlined, MessageOutlined, CalendarOutlined} from '@ant-design/icons-vue'; <AppstoreOutlined /> <MessageOutli

@ant-design/icons源码解读

zwf193071的专栏

12-10

1885

@ant-design/icons源码解读从package.json开始读源码，我习惯从package.json里的scripts开始，从这里，可以看到该npm包发布前做了哪些事。 "scripts": { "build": "npm run build:lib && npm run build:index-es && npm run build:umd", "build:lib": "cross-env NODE_ENV=production rimr

ant-design-vue的icon图标动态渲染

Motong_Lee的博客

04-18

1395

/ 把app传入其中。// 动态加载ant-icons。icon的name直接去。

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 图标吧！

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交