diff --git a/packages/icons/README.md b/packages/icons/README.md index 3e92eab334..3b39643ed0 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -1,6 +1,6 @@ # @vibe/icons -This package includes all of the icons of monday.com's [Vibe Design System](https://vibe.monday.com/?path=/story/media-icon--icons-list-story), available as React components and raw SVGs for flexible usage in your projects. +This package includes all of the icons of monday.com's [Vibe Design System](https://vibe.monday.com/?path=/story/media-icon--icons-list-story), available as React components and raw SVGs and with lazy loading support for optimized performance and flexible usage in your projects. ## Installation @@ -19,6 +19,12 @@ npm install @vibe/icons import { Close } from "@vibe/icons"; ``` +#### Using Lazy React Components + +```javascript +import { Close } from "@vibe/icons/lazy"; +``` + #### Using Raw SVG Files ```javascript diff --git a/packages/icons/scripts/generate-lazy-icons.js b/packages/icons/scripts/generate-lazy-icons.js index 69f9dc1233..e177a98c0a 100644 --- a/packages/icons/scripts/generate-lazy-icons.js +++ b/packages/icons/scripts/generate-lazy-icons.js @@ -32,7 +32,7 @@ export default ${fileNameWithoutExtension}; const indexContent = iconFiles .map(file => { const fileNameWithoutExtension = path.basename(file, ".tsx"); - return `export { default as Lazy${fileNameWithoutExtension}Icon } from './${fileNameWithoutExtension}';`; + return `export { default as ${fileNameWithoutExtension} } from './${fileNameWithoutExtension}';`; }) .join("\n");