feat: icons support secondary

examples/max/.umirc.ts

@@ -105,6 +105,6 @@ export default defineConfig({
     jsStrategy: 'granularChunks',
   },
   icons: {
-    include: ['local:rice', 'ant-design:fire-twotone'],
+    include: ['local:rice', 'local:logo/umi', 'ant-design:fire-twotone'],
   },
 });

examples/max/cypress/e2e/smoke.cy.ts

@@ -65,5 +65,6 @@ describe('Basic Test', () => {
   it('display included Icon components', () => {
     cy.get('span.local\\:rice');
     cy.get('span.ant-design\\:fire-twotone');
+    cy.get('span.local\\:logo\\/umi');
   });
 });

examples/max/pages/index.tsx

@@ -13,7 +13,11 @@ import { Button, DatePicker, Input } from 'antd';
 import styles from './index.less';
 console.log(TestDecorator);
 
-const icons = ['local:rice', 'ant-design:fire-twotone'];
+const includedIcons = [
+  'local:rice',
+  'local:logo/umi',
+  'ant-design:fire-twotone',
+];
 
 export default function HomePage() {
   const { initialState } = useModel('@@initialState');
@@ -45,9 +49,10 @@ export default function HomePage() {
 
       <h2> Icons</h2>
       <div>
-        {icons.map((i) => (
-          <Icon key={i} icon={i} className={i} />
-        ))}
+        {includedIcons.map((i) => {
+          return <Icon icon={i} className={i} key={i} />;
+        })}
+        <Icon icon="local:logo/foo/smile" />
       </div>
     </div>
   );

packages/preset-umi/src/features/icons/icons.ts

@@ -3,6 +3,7 @@ import {
   importLazy,
   installWithNpmClient,
   logger,
+  winPath,
 } from '@umijs/utils';
 import fs from 'fs';
 import path from 'path';
@@ -135,10 +136,10 @@ export default (api: IApi) => {
     }
     const localIconDir = getLocalIconDir();
     const localIcons: string[] = [];
+
     if (fs.existsSync(localIconDir)) {
       localIcons.push(
-        ...fs
-          .readdirSync(localIconDir)
+        ...readIconsFromDir(localIconDir)
           .filter((file) => file.endsWith('.svg'))
           .map((file) => file.replace(/\.svg$/, '')),
       );
@@ -380,7 +381,7 @@ function normalizeRotate(rotate: number | string) {
 }
 
 function camelCase(str: string) {
-  return str.replace(/-([a-z]|[1-9])/g, (g) => g[1].toUpperCase());
+  return str.replace(/\\//g, '-').replace(/-([a-z]|[1-9])/g, (g) => g[1].toUpperCase());
 }
 
 function normalizeIconName(name: string) {
@@ -430,3 +431,23 @@ function normalizeIconName(name: string) {
     return path.join(api.paths.absSrcPath, 'icons');
   }
 };
+
+function readIconsFromDir(dir: string) {
+  const icons: string[] = [];
+  const prefix = winPath(path.join(dir, './'));
+
+  const collect = (p: string) => {
+    if (fs.statSync(p).isDirectory()) {
+      const files = fs.readdirSync(p);
+      files.forEach((name) => {
+        collect(path.join(p, name));
+      });
+    } else {
+      const prunePath = winPath(p).replace(prefix, '');
+      icons.push(prunePath);
+    }
+  };
+  collect(dir);
+
+  return icons;
+}

packages/preset-umi/src/features/icons/svgr.ts

@@ -5,7 +5,9 @@ import type { IApi } from '../../types';
 import { loadIcon } from './loadIcon';
 
 function camelCase(str: string) {
-  return str.replace(/-([a-z]|[0-9])/g, (g) => g[1].toUpperCase());
+  return str
+    .replace(/\//g, '-')
+    .replace(/-([a-z]|[0-9])/g, (g) => g[1].toUpperCase());
 }
 
 export function generateIconName(opts: { collect: string; icon: string }) {