@veeqo/ui 12.3.1 → 12.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -136,3 +136,49 @@ To work with icons locally:
|
|
|
136
136
|
3. Icons will be available in the design system components directory
|
|
137
137
|
|
|
138
138
|
For more detailed information about the icon system, see our [Icon System Figma Integration Documentation](https://quip-amazon.com/rwuZAJgL0Fr1/Icon-System-Update-Figma-Integration).
|
|
139
|
+
|
|
140
|
+
### Adding additional SVG icon sets
|
|
141
|
+
|
|
142
|
+
The build script supports multiple icon sets through the `ICON_SETS` configuration object. To add a new icon set:
|
|
143
|
+
|
|
144
|
+
#### Create a new directory structure for your icons
|
|
145
|
+
|
|
146
|
+
```terminal
|
|
147
|
+
src/icons/
|
|
148
|
+
└── your-icon-set/
|
|
149
|
+
├── components/ # Generated React components
|
|
150
|
+
└── imports/ # Raw SVGs
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
#### Add your configuration to ICON_SETS in the build script
|
|
154
|
+
|
|
155
|
+
```typescript
|
|
156
|
+
const ICON_SETS = {
|
|
157
|
+
// Existing configurations...
|
|
158
|
+
yourIconSet: {
|
|
159
|
+
import: './src/icons/your-icon-set/imports', // Directory containing source SVG files
|
|
160
|
+
output: './src/icons/your-icon-set/components', // Directory where React components will be generated
|
|
161
|
+
svgrConfig: {
|
|
162
|
+
plugins: ['@svgr/plugin-jsx', '@svgr/plugin-prettier'],
|
|
163
|
+
typescript: true,
|
|
164
|
+
exportType: 'named',
|
|
165
|
+
ref: false,
|
|
166
|
+
prettierConfig: './.prettierrc',
|
|
167
|
+
// Additional SVGR configurations as needed:
|
|
168
|
+
replaceAttrValues: {
|
|
169
|
+
'#000000': 'currentColor', // Replace specific colors
|
|
170
|
+
}, // SVGR transformation options, for full list of options see: https://react-svgr.com/docs/options/
|
|
171
|
+
icon: 24, // Set default icon size
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
};
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
This will add it to the build script `npm run build`
|
|
178
|
+
|
|
179
|
+
The build script will automatically:
|
|
180
|
+
|
|
181
|
+
- Clean the output directory
|
|
182
|
+
- Generate React components from SVGs
|
|
183
|
+
- Create index files for exports
|
|
184
|
+
- Apply consistent formatting and linting
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veeqo/ui",
|
|
3
|
-
"version": "12.3.
|
|
3
|
+
"version": "12.3.2",
|
|
4
4
|
"description": "New optimised component library for Veeqo.",
|
|
5
5
|
"author": "Robert Wealthall",
|
|
6
6
|
"license": "ISC",
|
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
"@svgr/core": "^8.1.0",
|
|
71
71
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
72
72
|
"@svgr/plugin-prettier": "^8.1.0",
|
|
73
|
+
"@svgr/plugin-svgo": "^8.1.0",
|
|
73
74
|
"@testing-library/dom": "^8.11.3",
|
|
74
75
|
"@testing-library/jest-dom": "^5.12.0",
|
|
75
76
|
"@testing-library/react": "^12.1.5",
|