react ant icon的简单使用

refer: 快速上手 - Ant Design

1.引入ant

npm install antd --save

2.在页面引用:

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

如果想要引入多个icon,可以这样书写:

import { UserOutlined, MailOutlined, PieChartOutlined } from '@ant-design/icons';

上面这行代码就是在页面引入了ant的icon StarOutlined,在页面显示的是一个空心的星星

3.在需要的位置使用这个icon

<Button type="primary" onClick={() => this.handleViewClick(record.id)}>

  <StarOutlined />

  查看

</Button>

上面这段代码是在查看这个button左侧增加了这个星星icon,如果你想设置css,例如居右8px等,可以使用:

<StarOutlined style={{ marginRight: 8 }} />

如果是在''中引用,可以这样书写:

{
    title: (
      <span>
        <StarOutlined style={{ marginRight: 8 }} />
        所属计算方案名称
      </span>
    ),
    dataIndex: 'calculation_plan_name',
    key: 'calculation_plan_name',
  },
相关推荐
解道Jdon4 天前
JavaScript真的应该一分为二吗?
javascript·reactjs
解道Jdon6 天前
ChatGPT搜索引擎推出Chrome插件
javascript·reactjs
解道Jdon7 天前
重新架构:从 Redis 到 SQLite 性能提升
javascript·reactjs
光影少年8 天前
前端文件上传组件流程的封装
前端·reactjs
解道Jdon9 天前
Clace和sqlite-fs:使用SQLite替代文件系统
javascript·reactjs
ZhaiMou9 天前
Zustand介绍与使用 React状态管理工具
前端·javascript·react.js·前端框架·html·ecmascript·reactjs
MavenTalk10 天前
前端跨平台开发常见的解决方案
前端·flutter·react native·reactjs·weex·大前端
乐闻x14 天前
探索 JavaScript 事件机制(四):React 合成事件系统
javascript·reactjs·1024程序员节
墨渊君92522 天前
昆仑虚 - NextJS 项目如何进行部署?
前端·javascript·macos·docker·node.js·reactjs·web
墨渊君92523 天前
仿 Mac 个人网站开发 |项目复盘
前端·javascript·macos·reactjs·web