Ant Design 图标库使用指南

最新推荐文章于 2025-01-08 16:18:38 发布

滕骅照Fitzgerald

最新推荐文章于 2025-01-08 16:18:38 发布

阅读量1.2k

点赞数 9

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00431/article/details/140972512

Ant Design 图标库使用指南

项目地址:https://gitcode.com/gh_mirrors/ant/ant-design-icons

项目介绍

Ant Design图标库是Ant Design设计体系的一部分，由蚂蚁集团和社区共同维护。这个图标库提供了一套完整、统一且美观的矢量图标，适用于Web界面中常见的操作如保存、编辑、删除等。此外，还提供了表示文件类型和状态的图标。

特点

可自定义：支持主题编辑器进行个性化定制。
丰富的图标集：涵盖了多种场景下的图标需求。
易于集成：通过npm包轻松安装并使用在项目中。

项目快速启动

在你的项目中使用Ant Design图标非常简单，首先你需要确保已经安装了@ant-design/icons包。可以通过以下命令进行安装：

npm install @ant-design/icons

或者如果你更喜欢yarn:

yarn add @ant-design/icons

接下来，在你的组件或页面中导入所需的图标组件，例如使用MenuFoldOutlined图标：

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

function App() {
  return (
    <div>
      <MenuFoldOutlined />
    </div>
  );
}

这将显示一个折叠菜单图标的矢量图像。

应用案例和最佳实践

使用场景示例

假设你在创建一个具有导航功能的应用程序，你可以使用MenuFoldOutlined和MenuUnfoldOutlined图标来控制侧边栏的展开与收缩：

import React, { useState } from 'react';
import { Layout, Button } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';

const { Header, Sider, Content } = Layout;

function MyLayout() {
  const [collapsed, setCollapsed] = useState(false);

  const toggle = () => {
    setCollapsed(!collapsed);
  };

  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        {/* Side menu */}
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
          <Button onClick={toggle}>{collapsed ? '展开' : '收起'}菜单</Button>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          {/* Main content */}
        </Content>
      </Layout>
    </Layout>
  );
}

export default MyLayout;