项目介绍
这个网站是一个基于React的前端项目，主要功能是展示各种图标。项目使用了Ant Design组件库，提供了丰富的图标样式和组件，方便开发者快速构建美观的界面。
技术栈
- React:用于构建用户界面的JavaScript库
- Ant Design:一个企业级UI设计语言和React组件库，提供了丰富的图标样式和组件
使用说明
- 首先，确保你已经安装了Node.js环境，然后通过npm安装项目依赖：
npm install react react-dom antd
- 在项目根目录下创建一个名为
index.js的文件，然后引入React、ReactDOM和Ant Design库，并设置基本的页面样式：
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import 'antd/dist/antd.css';
import App from './App';
import IconPage from './components/IconPage';
ReactDOM.render(
<Router>
<Layout>
<Menu theme="dark" defaultSelectedKeys={['2']} mode="horizontal">
<Menu.Item key="2">
<Link to="/">图标</Link>
</Menu.Item>
</Menu>
<Layout.Content>
<Route path="/" component={IconPage} />
</Layout.Content>
</Layout>
</Router>,
document.getElementById('root')
);
- 在
src/components目录下创建一个名为IconPage.js的文件，然后引入Ant Design的Icon组件，并定义一个简单的页面布局：
import React from 'react';
import { Icon } from 'antd';
import 'antd/dist/antd.css';
import './IconPage.less';
const icons = [
'user', 'search', 'setting', 'info', 'notification', 'loading', // ...更多图标请参考https://2x.antdv.com/components/icon-cn/
];
const IconPage = () => (
<div className="icon-page">
<h1>图标</h1>
{icons.map((icon) => (
<Icon type={icon} style={{ fontSize: 32, marginBottom: 8 }} key={icon} />
))}
</div>
);
export default IconPage;
- 最后，在
src/main.less文件中引入Ant Design的默认样式，并自定义一些全局样式：
@import "~antd/dist/antd.less";
@import "./styles/variables.less";
@import "./styles/global.less";
- 在
src/styles/variables.less文件中定义一些全局变量：
// 这里可以自定义一些颜色、字体等全局样式变量，例如：$primary-color: #1DA57A; $link-color: #009688; ...等等。更多变量请参考https://2x.antdv.com/components/customize-theme/variables。如果需要修改字体大小或间距等微调参数，可以在此处进行调整。
