feat: extract @tiny-design/icons package with tree-shakeable SVG icons

- Add new @tiny-design/icons package with 242 individual SVG icon components
  generated from the existing iconfont.svg font file
- Each icon is a forwardRef component with size, color, className, style props
- Package uses sideEffects: false and unbundle mode for optimal tree-shaking
- Remove font-based Icon component from @tiny-design/react
- Migrate all internal Icon usages (rate, layout/sidebar, docs app) to SVG icons
- Add @tiny-design/icons to docs app live code playground scope
- Add snapshot and prop tests for icon components

Author: wangdicoder

apps/docs/package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tiny-design/icons": "workspace:*",
     "@tiny-design/react": "workspace:*",
     "@tiny-design/tokens": "workspace:*",
     "@mdx-js/react": "^3.1.1",

apps/docs/src/components/code-block/index.tsx

@@ -24,6 +24,7 @@ Prism.languages.bash = Prism.languages.shell = {
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
 import { LightCodeTheme, DarkCodeTheme } from './code-theme';
 import * as Components from '@tiny-design/react';
+import * as SvgIcons from '@tiny-design/icons';
 import CollapseTransition from '@tiny-design/react/collapse-transition';
 import { useTheme } from '@tiny-design/react';
 import { useLocaleContext } from '../../context/locale-context';
@@ -49,7 +50,7 @@ export const CodeBlock = ({ children, className, live }: Props): React.ReactElem
   if (live) {
     return (
       <div className="code-block__container" ref={ref}>
-        <LiveProvider code={children.trim()} theme={codeTheme} scope={Components}>
+        <LiveProvider code={children.trim()} theme={codeTheme} scope={{ ...Components, ...SvgIcons }}>
           <LivePreview className="code-block__previewer" />
           <LiveError />
           <CollapseTransition isShow={showCode}>

apps/docs/src/components/doc-footer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './component-page.scss';
 import { Link, useLocation } from 'react-router-dom';
 import { RouterItem } from '../../routers';
-import { Icon } from '@tiny-design/react';
+import { IconLeft, IconRight } from '@tiny-design/icons';
 
 type Props = {
   routers: RouterItem[];
@@ -31,7 +31,7 @@ export const DocFooter = ({ routers }: Props): React.ReactElement => {
     <footer className="component-page__footer">
       {siblingMenus[0] && siblingMenus[0].route !== currRouteName ? (
         <Link to={`${baseUrl}/${siblingMenus[0].route!}`}>
-          <Icon name="left" className="component-page__footer-icon-left" />
+          <IconLeft className="component-page__footer-icon-left" />
           <span className="component-page__footer-label">{siblingMenus[0].title}</span>
         </Link>
       ) : (
@@ -40,7 +40,7 @@ export const DocFooter = ({ routers }: Props): React.ReactElement => {
       {siblingMenus[1] && siblingMenus[1].route !== currRouteName && (
         <Link to={`${baseUrl}/${siblingMenus[1].route!}`}>
           <span className="component-page__footer-label">{siblingMenus[1].title}</span>
-          <Icon name="right" className="component-page__footer-icon-right" />
+          <IconRight className="component-page__footer-icon-right" />
         </Link>
       )}
     </footer>

apps/docs/src/components/feature-block/index.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import './feature-block.scss';
-import { Icon } from '@tiny-design/react';
+import type { IconProps } from '@tiny-design/icons';
 
 type Props = {
-  icon: string;
+  icon: React.FC<IconProps>;
   title: string;
   desc: string;
   style?: React.CSSProperties;
 };
 
-export const FeatureBlock = ({ icon, title, desc, style }: Props): React.ReactElement => (
+export const FeatureBlock = ({ icon: IconComponent, title, desc, style }: Props): React.ReactElement => (
   <div className="feature-block" style={style}>
     <div className="feature-block__icon-container">
-      <Icon name={icon} className="feature-block__icon" size={24} />
+      <IconComponent className="feature-block__icon" size={24} />
     </div>
     <h3 className="feature-block__title">{title}</h3>
     <p className="feature-block__desc">{desc}</p>

apps/docs/src/components/header/index.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import './header.scss';
 import { NavLink } from 'react-router-dom';
 import pkg from '../../../../../packages/react/package.json';
-import { Icon, Link } from '@tiny-design/react';
+import { Link } from '@tiny-design/react';
+import { IconGithub } from '@tiny-design/icons';
 import { useSidebarToggle } from '../../context/sidebar-toggle-context';
 import { useLocaleContext } from '../../context/locale-context';
 import { ThemeToggle } from './theme-toggle';
@@ -64,7 +65,7 @@ export const Header = (): React.ReactElement => {
           </li>
           <li className="header__nav-item">
             <Link href={repository.url} underline={false} rel="noreferrer noopener">
-              <Icon name="github" color="currentColor" size={19} />
+              <IconGithub color="currentColor" size={19} />
             </Link>
           </li>
           <li className="header__nav-item">

apps/docs/src/containers/home/footer/index.tsx

@@ -3,7 +3,7 @@ import './footer.scss';
 import pkg from '../../../../../../packages/react/package.json';
 
 const { version, repository } = pkg;
-import { Icon } from '@tiny-design/react';
+import { IconGithub } from '@tiny-design/icons';
 import logoSvg from '../../../assets/logo/logo.svg';
 
 export const Footer = (): React.ReactElement => (
@@ -15,7 +15,7 @@ export const Footer = (): React.ReactElement => (
     </div>
     <a href={repository.url} target="_blank" className="footer__link" rel="noreferrer noopener">
       <div className="footer__github">
-        <Icon name="github" size={25} color="#fff" className="footer__icon" />
+        <IconGithub size={25} color="#fff" className="footer__icon" />
         <span>GitHub</span>
       </div>
     </a>

apps/docs/src/containers/home/index.tsx

@@ -1,7 +1,13 @@
 import React, { useMemo } from 'react';
 import './home.scss';
 import { useNavigate } from 'react-router-dom';
-import { Button, Icon, Flex, Typography, Statistic, Card, Row, Col } from '@tiny-design/react';
+import { Button, Flex, Typography, Statistic, Card, Row, Col } from '@tiny-design/react';
+import {
+  IconColorlens, IconOrgUnit, IconPuzzle, IconAccessible,
+  IconStar, IconStructure, IconProcess, IconEye, IconEditFile, IconFeedback,
+  IconGithub,
+} from '@tiny-design/icons';
+import type { IconProps } from '@tiny-design/icons';
 import { Footer } from './footer';
 import { useLocaleContext } from '../../context/locale-context';
 import { getComponentMenu } from '../../routers';
@@ -15,20 +21,20 @@ const HomePage = (): React.ReactElement => {
   const navigate = useNavigate();
   const { siteLocale: s } = useLocaleContext();
 
-  const features = [
-    { icon: 'colorlens', title: s.home.features.themeable, desc: s.home.features.themeableDesc },
-    { icon: 'org-unit', title: s.home.features.elegant, desc: s.home.features.elegantDesc },
-    { icon: 'puzzle', title: s.home.features.composable, desc: s.home.features.composableDesc },
-    { icon: 'accessible', title: s.home.features.accessible, desc: s.home.features.accessibleDesc },
+  const features: { Icon: React.FC<IconProps>; title: string; desc: string }[] = [
+    { Icon: IconColorlens, title: s.home.features.themeable, desc: s.home.features.themeableDesc },
+    { Icon: IconOrgUnit, title: s.home.features.elegant, desc: s.home.features.elegantDesc },
+    { Icon: IconPuzzle, title: s.home.features.composable, desc: s.home.features.composableDesc },
+    { Icon: IconAccessible, title: s.home.features.accessible, desc: s.home.features.accessibleDesc },
   ];
 
-  const categoryIcons = ['star', 'structure', 'process', 'eye', 'edit-file', 'feedback', 'puzzle'];
+  const categoryIcons: React.FC<IconProps>[] = [IconStar, IconStructure, IconProcess, IconEye, IconEditFile, IconFeedback, IconPuzzle];
 
   const { stats, categories } = useMemo(() => {
     const menu = getComponentMenu(s);
     const totalComponents = menu.reduce((sum, cat) => sum + (cat.children?.length ?? 0), 0);
     const cats = menu.map((cat, i) => ({
-      icon: categoryIcons[i] ?? 'puzzle',
+      Icon: categoryIcons[i] ?? IconPuzzle,
       name: cat.title,
       count: cat.children?.length ?? 0,
       route: cat.children?.[0]?.route ?? '',
@@ -68,7 +74,7 @@ const HomePage = (): React.ReactElement => {
           <Button
             className="home__btn"
             size="lg"
-            icon={<Icon name="github" color="currentColor" />}
+            icon={<IconGithub color="currentColor" />}
             onClick={() => window.open(repository.url)}>
             {s.home.github}
           </Button>
@@ -83,7 +89,7 @@ const HomePage = (): React.ReactElement => {
               <Card bordered={false} className="home__feature-card" style={{ animationDelay: `${i * 0.1}s` }}>
                 <Flex vertical align="center" gap="md">
                   <div className="home__feature-icon">
-                    <Icon name={feature.icon} size={24} />
+                    <feature.Icon size={24} />
                   </div>
                   <Typography.Heading level={3}>{feature.title}</Typography.Heading>
                   <Typography.Paragraph>{feature.desc}</Typography.Paragraph>
@@ -111,7 +117,7 @@ const HomePage = (): React.ReactElement => {
               onClick={() => navigate(`/components/${cat.route}`)}
               style={{ animationDelay: `${i * 0.08}s` }}>
               <Flex vertical align="center" gap="sm">
-                <Icon name={cat.icon} size={32} color="currentColor" />
+                <cat.Icon size={32} color="currentColor" />
                 <Typography.Text strong>{cat.name}</Typography.Text>
                 <Typography.Text className="home__category-count">{s.home.nComponents(cat.count)}</Typography.Text>
               </Flex>

packages/icons/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src/'],
+  verbose: true,
+  setupFilesAfterEnv: ['<rootDir>/test-setup.js'],
+  transform: {
+    '^.+\\.tsx?$': ['ts-jest', {
+      tsconfig: 'tsconfig.test.json',
+      isolatedModules: true,
+    }],
+  },
+};

packages/icons/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@tiny-design/icons",
+  "version": "1.0.4",
+  "description": "SVG icon components for tiny-design",
+  "license": "MIT",
+  "keywords": [
+    "tiny",
+    "tiny-design",
+    "icons",
+    "svg",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wangdicoder/tiny-design.git",
+    "directory": "packages/icons"
+  },
+  "author": "Di Wang<wangdicoder@gmail.com>",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    },
+    "./lib/*": "./lib/*",
+    "./es/*": "./es/*"
+  },
+  "sideEffects": false,
+  "files": [
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "generate": "node scripts/generate-icons.js",
+    "build": "npm run clean && npm run generate && tsdown",
+    "clean": "rimraf lib es",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:update": "jest --updateSnapshot"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.0.0",
+    "@types/react": "^18.2.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^29.0.0",
+    "tsdown": "^0.21.1",
+    "typescript": "^5.4.0"
+  }
+}

packages/icons/scripts/generate-icons.js

@@ -0,0 +1,109 @@
+const fs = require('fs');
+const path = require('path');
+
+const SVG_FONT_PATH = path.resolve(__dirname, '../../tokens/scss/fonts/iconfont.svg');
+const SRC_DIR = path.resolve(__dirname, '../src');
+
+function parseName(glyphName) {
+  // Strip leading dash, convert to PascalCase
+  const clean = glyphName.replace(/^-/, '');
+  return clean
+    .split(/[-_]+/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+}
+
+function toFileName(glyphName) {
+  // Strip leading dash, keep kebab-case
+  return glyphName.replace(/^-/, '');
+}
+
+function extractGlyphs(svgContent) {
+  const glyphs = [];
+  const regex = /<glyph\s+glyph-name="([^"]+)"[^>]*\sd="([^"]+)"/g;
+  let match;
+  while ((match = regex.exec(svgContent)) !== null) {
+    const [, name, d] = match;
+    if (name && d) {
+      glyphs.push({ name, d });
+    }
+  }
+  return glyphs;
+}
+
+function generateComponent(pascalName, pathData) {
+  return `import { forwardRef } from 'react';
+import type { IconProps } from './types';
+
+const ${pascalName} = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+  const { size = '1em', color = 'currentColor', className, style, ...rest } = props;
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 1024 1024"
+      width={size}
+      height={size}
+      fill={color}
+      className={className}
+      style={style}
+      {...rest}
+    >
+      <g transform="translate(0, 896) scale(1, -1)">
+        <path d="${pathData}" />
+      </g>
+    </svg>
+  );
+});
+
+${pascalName}.displayName = '${pascalName}';
+
+export { ${pascalName} };
+`;
+}
+
+function generateTypes() {
+  return `import type { SVGAttributes } from 'react';
+
+export interface IconProps extends SVGAttributes<SVGSVGElement> {
+  size?: string | number;
+  color?: string;
+}
+`;
+}
+
+function main() {
+  const svgContent = fs.readFileSync(SVG_FONT_PATH, 'utf-8');
+  const glyphs = extractGlyphs(svgContent);
+
+  console.log(`Found ${glyphs.length} glyphs`);
+
+  // Ensure src dir exists
+  fs.mkdirSync(SRC_DIR, { recursive: true });
+
+  // Write types.ts
+  fs.writeFileSync(path.join(SRC_DIR, 'types.ts'), generateTypes());
+
+  const exports = [];
+
+  for (const glyph of glyphs) {
+    const pascalName = 'Icon' + parseName(glyph.name);
+    const fileName = 'icon-' + toFileName(glyph.name);
+    const filePath = path.join(SRC_DIR, `${fileName}.tsx`);
+
+    fs.writeFileSync(filePath, generateComponent(pascalName, glyph.d));
+    exports.push({ pascalName, fileName });
+  }
+
+  // Write index.ts barrel
+  const indexLines = [
+    `export type { IconProps } from './types';`,
+    '',
+    ...exports.map((e) => `export { ${e.pascalName} } from './${e.fileName}';`),
+    '',
+  ];
+  fs.writeFileSync(path.join(SRC_DIR, 'index.ts'), indexLines.join('\n'));
+
+  console.log(`Generated ${exports.length} icon components`);
+}
+
+main();