antdesignpro 添加一个新的logo
时间: 2024-01-07 15:05:05 浏览: 220
浅谈Ant Design Pro 菜单自定义 icon
在 Ant Design Pro 中添加一个新的 logo 可以分为以下步骤:
1. 将新的 logo 图片文件放置到项目的 `public` 文件夹下。例如,将新的 logo 图片命名为 `new-logo.png` 并放置到 `public` 文件夹下。
2. 在 `config/config.ts` 文件中添加一个新的菜单项来显示新的 logo。例如:
```typescript
export default {
// ... 其他配置项
menu: {
// ... 其他菜单项
newLogo: {
name: 'New Logo',
icon: '/new-logo.png',
path: '/new-logo',
},
},
// ...
};
```
在上面的代码中,我们添加了一个名为 `New Logo` 的菜单项,它的图标为 `/new-logo.png`,路径为 `/new-logo`。你需要将 `icon` 属性的值设置为新的 logo 图片路径,将 `name` 属性的值设置为菜单项的名称,将 `path` 属性的值设置为菜单项的路由路径。
3. 在页面中使用新的 logo。在需要显示新的 logo 的页面中,可以使用 `<img>` 标签来显示新的 logo 图片。例如:
```jsx
import React from 'react';
function NewLogoPage() {
return (
<div>
<h1>New Logo Page</h1>
<img src="/new-logo.png" alt="New Logo" />
</div>
);
}
export default NewLogoPage;
```
在上面的代码中,我们在页面中使用了 `<img>` 标签来显示新的 logo 图片。你需要将 `src` 属性的值设置为新的 logo 图片路径。
以上就是在 Ant Design Pro 中添加一个新的 logo 的步骤。
阅读全文