hipowered.dev/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-11-13 13:48:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve clarity and readability of packages guides in docs (#1547)

Browse Source
This commit is contained in:
Jackson
2023-09-02 21:48:45 +02:00
committed by GitHub
parent 27b5b7eaad
commit 92d05b5fca
7 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guide/packages/lucide-preact.md
+5 -5
View File
@@ -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
docs/guide/packages/lucide-react-native.md
+3 -3
View File
@@ -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
docs/guide/packages/lucide-react.md
+6 -6
View File
@@ -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.
docs/guide/packages/lucide-solid.md
+4 -4
View File
@@ -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
docs/guide/packages/lucide-svelte.md
+5 -5
View File
@@ -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
<script>
@@ -73,10 +73,10 @@ This results a filled phone icon.
## 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
docs/guide/packages/lucide-vue-next.md
+5 -5
View File
@@ -28,9 +28,9 @@ npm install lucide-vue-next
## 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 Vue 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 Vue 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
@@ -61,7 +61,7 @@ import { Camera } from 'lucide-vue-next';
### 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).
```vue
<template>
@@ -71,10 +71,10 @@ To apply custom props to change the look of the icon, this can be done by simply
## 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
docs/guide/packages/lucide-vue.md
+5 -5
View File
@@ -28,9 +28,9 @@ npm install lucide-vue
## 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 Vue 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 Vue 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
@@ -63,7 +63,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).
```vue
<template>
@@ -73,10 +73,10 @@ To apply custom props to change the look of the icon, this can be done by simply
## 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