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',
  },
相关推荐
前端青山3 天前
使用脚手架搭建React项目
开发语言·前端·javascript·前端框架·reactjs
土豆烩茄子5 天前
使用vscode+expo+Android夜神模拟器运行react-native项目
android·reactjs
解道Jdon13 天前
Mill:比Maven快10倍的JVM构建工具
javascript·reactjs
晴天飛 雪15 天前
React 守卫路由
前端框架·reactjs
解道Jdon20 天前
JavaScript真的应该一分为二吗?
javascript·reactjs
解道Jdon21 天前
ChatGPT搜索引擎推出Chrome插件
javascript·reactjs
解道Jdon23 天前
重新架构:从 Redis 到 SQLite 性能提升
javascript·reactjs
光影少年23 天前
前端文件上传组件流程的封装
前端·reactjs
解道Jdon24 天前
Clace和sqlite-fs:使用SQLite替代文件系统
javascript·reactjs
ZhaiMou24 天前
Zustand介绍与使用 React状态管理工具
前端·javascript·react.js·前端框架·html·ecmascript·reactjs