From 92d05b5fcac0540670b3cb1a34deac1cd876e4bd Mon Sep 17 00:00:00 2001 From: Jackson Date: Sat, 2 Sep 2023 13:48:45 -0600 Subject: [PATCH] Improve clarity and readability of packages guides in docs (#1547) --- docs/guide/packages/lucide-preact.md | 10 +++++----- docs/guide/packages/lucide-react-native.md | 6 +++--- docs/guide/packages/lucide-react.md | 12 ++++++------ docs/guide/packages/lucide-solid.md | 8 ++++---- docs/guide/packages/lucide-svelte.md | 10 +++++----- docs/guide/packages/lucide-vue-next.md | 10 +++++----- docs/guide/packages/lucide-vue.md | 10 +++++----- 7 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/guide/packages/lucide-preact.md b/docs/guide/packages/lucide-preact.md index 3f6bcceaa..6fd69b9af 100644 --- a/docs/guide/packages/lucide-preact.md +++ b/docs/guide/packages/lucide-preact.md @@ -26,9 +26,9 @@ npm install lucide-preact ## How to use -It's build with ES Modules so it's completely tree-shakable. +Lucide is built with ES Modules, so it's completely tree-shakable. -Each icon can be imported as a Preact component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away. +Each icon can be imported as a Preact component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away. ### Example @@ -56,7 +56,7 @@ export default App; ### Applying props -To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation). +To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation). ```jsx // Usage @@ -69,10 +69,10 @@ const App = () => { ## One generic icon component -It is possible to create one generic icon component to load icons. It's not recommended. +It is possible to create one generic icon component to load icons, but it is not recommended. ::: danger -Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application. +The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`. ::: ### Icon Component Example diff --git a/docs/guide/packages/lucide-react-native.md b/docs/guide/packages/lucide-react-native.md index 467b7cba9..d0b82e7db 100644 --- a/docs/guide/packages/lucide-react-native.md +++ b/docs/guide/packages/lucide-react-native.md @@ -52,7 +52,7 @@ export default App; ### Applying props -To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. +To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. ```jsx // Usage @@ -63,10 +63,10 @@ const App = () => { ## One generic icon component -It is possible to create one generic icon component to load icons. +It is possible to create one generic icon component to load icons, but it is not recommended. ::: warning -Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application. +The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`. ::: ### Icon Component Example diff --git a/docs/guide/packages/lucide-react.md b/docs/guide/packages/lucide-react.md index 047fcea49..7c8782e30 100644 --- a/docs/guide/packages/lucide-react.md +++ b/docs/guide/packages/lucide-react.md @@ -22,9 +22,9 @@ npm install lucide-react ## How to use -It's build with ES Modules so it's completely tree-shakable. +Lucide is built with ES Modules, so it's completely tree-shakable. -Each icon can be imported as a React component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away. +Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away. ### Example @@ -52,7 +52,7 @@ export default App; ### Applying props -To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation). +To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation). ```jsx // Usage @@ -63,10 +63,10 @@ const App = () => { ## One generic icon component -It is possible to create one generic icon component to load icons. It's not recommended. +It is possible to create one generic icon component to load icons, but it is not recommended. ::: danger -Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application. +The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`. This is not the case for the latest NextJS, because it uses server side rendering. The icons will be streamed to the client when needed. For NextJS with Dynamic Imports, see [dynamic imports](#nextjs-example) section for more information. ::: @@ -101,7 +101,7 @@ export default App; > :warning: This is experimental and only works with bundlers that support dynamic imports. -Lucide react exports a dynamic import map `dynamicIconImports`. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database. +Lucide react exports a dynamic import map `dynamicIconImports`, which is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system with where icon names are stored in a database. When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size. diff --git a/docs/guide/packages/lucide-solid.md b/docs/guide/packages/lucide-solid.md index 97395d060..94087df81 100644 --- a/docs/guide/packages/lucide-solid.md +++ b/docs/guide/packages/lucide-solid.md @@ -22,9 +22,9 @@ npm install lucide-solid ## How to use -It's build with ES Modules so it's completely tree-shakable. +Lucide is built with ES Modules, so it's completely tree-shakable. -Each icon can be imported as a Solid component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away. +Each icon can be imported as a Solid component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away. ### Example @@ -52,7 +52,7 @@ export default App; ### Applying props -To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation). +To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation). ```jsx // Usage @@ -66,7 +66,7 @@ const App = () => { It is possible to create one generic icon component to load icons. It's not recommended. ::: danger -Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application. +The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`. ::: ### Icon Component Example diff --git a/docs/guide/packages/lucide-svelte.md b/docs/guide/packages/lucide-svelte.md index ef4968b48..3ad310e4b 100644 --- a/docs/guide/packages/lucide-svelte.md +++ b/docs/guide/packages/lucide-svelte.md @@ -22,9 +22,9 @@ npm install lucide-svelte ## How to use -It's build with ES Modules so it's completely tree-shakable. +Lucide is built with ES Modules, so it's completely tree-shakable. -Each icon can be imported as a Svelte component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away. +Each icon can be imported as a Svelte component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away. ### Example @@ -59,7 +59,7 @@ Additional props can be passed to adjust the icon: ### Applying props -To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation). +To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation). ```svelte