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>
55 lines
1.4 KiB
JSON
55 lines
1.4 KiB
JSON
{
|
|
"name": "@vjs-10/react-icons",
|
|
"version": "0.1.0",
|
|
"description": "React-specific icon components derived from @vjs-10/icons",
|
|
"main": "dist/index.js",
|
|
"module": "dist/index.mjs",
|
|
"types": "dist/index.d.ts",
|
|
"exports": {
|
|
".": {
|
|
"types": "./dist/index.d.ts",
|
|
"import": "./dist/index.mjs",
|
|
"require": "./dist/index.js"
|
|
}
|
|
},
|
|
"files": [
|
|
"dist"
|
|
],
|
|
"scripts": {
|
|
"generate": "svgr --config-file svgr.config.js --out-dir src/generated-icons ../../core/icons/assets",
|
|
"build": "npm run generate && rollup -c && tsc --project tsconfig.build.json",
|
|
"test": "echo \"No tests yet\"",
|
|
"clean": "rm -rf dist src/generated-icons"
|
|
},
|
|
"keywords": [
|
|
"icons",
|
|
"react",
|
|
"media",
|
|
"player",
|
|
"components"
|
|
],
|
|
"license": "Apache-2.0",
|
|
"dependencies": {
|
|
"@vjs-10/icons": "*"
|
|
},
|
|
"peerDependencies": {
|
|
"react": ">=16.8.0"
|
|
},
|
|
"devDependencies": {
|
|
"rollup": "^4.0.0",
|
|
"@rollup/plugin-typescript": "^11.0.0",
|
|
"@rollup/plugin-node-resolve": "^15.0.0",
|
|
"@rollup/plugin-commonjs": "^25.0.0",
|
|
"tslib": "^2.6.0",
|
|
"typescript": "^5.3.0",
|
|
"@types/react": "^18.0.0",
|
|
"react": "^18.0.0",
|
|
"@svgr/cli": "^8.0.0",
|
|
"@svgr/plugin-jsx": "^8.0.0",
|
|
"@svgr/plugin-prettier": "^8.0.0",
|
|
"@svgr/babel-plugin-add-jsx-attribute": "^8.0.0"
|
|
},
|
|
"publishConfig": {
|
|
"access": "public"
|
|
}
|
|
} |