Ant Design Pro笔记

简介

官方文档

场景应用

使用svg

react项目使用SVG图标，参考：React项目中使用svg图标

主要区别在于webpack配置。
Ant Design Pro项目的webpack配置如下

• 修改config/config.js文件，添加如下代码

// ...
import path from 'path'
// ...
export default defineConfig({
  // ...
  chainWebpack(memo, { env, webpack, createCSSRule }) {
    const iconPath = path.resolve(__dirname, '../', 'src/icons/svg')

    // 先找到原来的svg配置，设置exclude
    const svgRule = memo.module.rules.get('svg')
    svgRule.exclude.add(iconPath)

    // 新的配置
    memo.module.rule('icon-svg')
      .test(/\.svg$/)
      .include
        .add(iconPath)
        .end()
      .use('svg-sprite')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        })
  }
})

左侧菜单中的Icon是通过配置修改的。要想使用我们自己的svg图标，需要修改下配置，具体如下：

• 修改src/app.jsx文件

// ...
import SvgIcon from '@/components/SvgIcon'
// ...
export const layout = ({ initialState }) => {
  return {
    // ...
    menuDataRender: menuDataRender,
  };
};

function menuDataRender(menuList) {
  return menuList.map((item) => {
    return {
      ...item,
      // 这里的 anticon 是为了复用原来的样式
      icon: item.iconSvg ? <SvgIcon icon={item.iconSvg} className="anticon margin_right_10" /> : item.icon,
      children: item.children ? menuDataRender(item.children) : undefined,
    };
  });
}

• 修改config/routes.js文件

export default [
  {
    path: '/welcome',
    name: '首页',
    // icon: 'home',       // 原来的方式，仍然可以使用
    iconSvg: 'home',    // 新的方式，home为 src/icons/svg 里面的某个svg图标文件名
    component: './Welcome',
  },