mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 21:57:29 +00:00
Christian PillsburyandClaude
6fcb18f1d2
Replace manually-coded React icon components with SVGR-generated ones from shared SVG assets. This establishes a maintainable, single-source-of-truth system for icons across the monorepo. ## Key Changes ### ✨ SVGR Integration - Add @svgr/cli with custom configuration for React component generation - Generate components from packages/core/icons/assets/ SVG files - Implement custom templates with generation warnings and JSDoc @generated tags - Replace manual src/icons/ with auto-generated src/generated-icons/ ### 🎨 Complete Styling Support - Add fill="currentColor" to all SVG source files in core package - Configure replaceAttrValues to transform currentColor → {color} in React components - Restore full color prop functionality (fill={color} on path elements) - Maintain backwards compatibility with existing IconProps interface ### 📚 Developer Experience - Add comprehensive README.md with usage examples and development workflow - Include clear "DO NOT EDIT" warnings in all generated files - Add .gitignore to exclude generated files from version control - Provide detailed generation instructions and architecture explanation ### 🏗️ Build System Integration - Update package.json scripts: npm run generate creates React components - Integrate generation into build pipeline (npm run build runs generate first) - Add SVGR dependencies: @svgr/cli, plugins, and babel-plugin-add-jsx-attribute - Maintain existing rollup + TypeScript build chain ## Technical Implementation - **Source**: SVG files in packages/core/icons/assets/ (single source of truth) - **Generator**: SVGR v8 with custom TypeScript React templates - **Output**: Auto-generated components in src/generated-icons/ with full JSDoc - **Styling**: fill={color} props + currentColor inheritance for dynamic theming - **Types**: Preserved IconProps interface with SVGAttributes<SVGElement> + color prop ## Verification ✅ Playwright testing confirms icons render correctly with proper colors ✅ All 5 icons (Play, Pause, VolumeHigh, VolumeLow, VolumeOff) generate successfully ✅ Color prop functionality verified (fill attribute updates dynamically) ✅ Build system integration working across full monorepo ✅ Backwards compatibility maintained with existing components This implementation provides automatic React component generation while maintaining full feature parity with the original manually-coded icons. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
const path = require('path')
|
|
|
|
module.exports = {
|
|
plugins: ['@svgr/plugin-jsx', '@svgr/plugin-prettier'],
|
|
typescript: true,
|
|
jsxRuntime: 'automatic',
|
|
icon: true,
|
|
expandProps: 'end',
|
|
svgProps: {
|
|
'aria-hidden': 'true'
|
|
},
|
|
replaceAttrValues: {
|
|
'#000': '{color}',
|
|
'#fff': '{color}',
|
|
'black': '{color}',
|
|
'white': '{color}',
|
|
'currentColor': '{color}'
|
|
},
|
|
template: (variables, { tpl }) => {
|
|
return tpl`
|
|
/**
|
|
* @fileoverview Auto-generated React component from SVG
|
|
*
|
|
* This file is automatically generated by SVGR from SVG files located in:
|
|
* packages/core/icons/assets/
|
|
*
|
|
* DO NOT EDIT THIS FILE DIRECTLY.
|
|
*
|
|
* To modify this icon:
|
|
* 1. Edit the corresponding SVG file in packages/core/icons/assets/
|
|
* 2. Run \`npm run generate\` in this package to regenerate components
|
|
*
|
|
* @generated
|
|
*/
|
|
import * as React from 'react';
|
|
import type { IconProps } from '../types';
|
|
|
|
${variables.interfaces};
|
|
|
|
const ${variables.componentName} = ({ color = 'currentColor', ...props }: IconProps) => (
|
|
${variables.jsx}
|
|
);
|
|
|
|
${variables.exports};
|
|
`
|
|
},
|
|
indexTemplate: (filePaths) => {
|
|
const exportEntries = filePaths.map(({ path: filePath }) => {
|
|
const basename = path.basename(filePath, path.extname(filePath))
|
|
const componentName = /^\d/.test(basename) ? `Svg${basename}` : basename
|
|
const iconName = `${componentName}Icon`
|
|
return `export { default as ${iconName} } from './${basename}';`
|
|
})
|
|
|
|
const header = `/**
|
|
* @fileoverview Auto-generated index file for React icon components
|
|
*
|
|
* This file is automatically generated by SVGR from SVG files located in:
|
|
* packages/core/icons/assets/
|
|
*
|
|
* DO NOT EDIT THIS FILE DIRECTLY.
|
|
*
|
|
* To modify icons or add new ones:
|
|
* 1. Add/edit SVG files in packages/core/icons/assets/
|
|
* 2. Run \`npm run generate\` in this package to regenerate components
|
|
*
|
|
* @generated
|
|
*/
|
|
`
|
|
|
|
return header + exportEntries.join('\n') + '\n'
|
|
}
|
|
} |