diff --git a/README.md b/README.md index a03e4399a..f6e783185 100644 --- a/README.md +++ b/README.md @@ -56,9 +56,11 @@ Implementation of the lucide icon library for web applications. ```sh npm install lucide +``` -#or +or +```sh yarn add lucide ``` @@ -70,9 +72,11 @@ Implementation of the lucide icon library for react applications. ```sh yarn add lucide-react +``` -# or +or +```sh npm install lucide-react ``` @@ -84,9 +88,11 @@ Implementation of the lucide icon library for React Native applications. ```sh yarn add lucide-react-native +``` -# or +or +```sh npm install lucide-react-native ``` @@ -98,9 +104,11 @@ Implementation of the lucide icon library for vue applications. ```sh yarn add lucide-vue +``` -# or +or +```sh npm install lucide-vue ``` @@ -112,9 +120,11 @@ Implementation of the lucide icon library for vue applications. ```sh yarn add lucide-vue-next +``` -# or +or +```sh npm install lucide-vue-next ``` @@ -124,9 +134,11 @@ For more details, see the [documentation](https://github.com/lucide-icons/lucide ```sh yarn add lucide-angular +``` -# or +or +```sh npm install lucide-angular ``` @@ -138,9 +150,11 @@ Implementation of the lucide icon library for preact applications. ```sh yarn add lucide-preact +``` -# or +or +```sh npm install lucide-preact ``` @@ -157,9 +171,11 @@ NPM package ```sh yarn add lucide-static +``` -# or +or +```sh npm install lucide-static ``` @@ -197,9 +213,11 @@ Implementation of the lucide icon library for Svelte applications. ```sh yarn add lucide-svelte +``` -# or +or +```sh npm install lucide-svelte ``` @@ -211,9 +229,11 @@ Implementation of the lucide icon library for solid applications. ```sh yarn add lucide-solid +``` -#or +or +```sh npm install lucide-solid ``` @@ -245,4 +265,3 @@ Thank you to all the people who contributed to Lucide! Powered by Vercel - diff --git a/docs/installation.md b/docs/installation.md index 351f0f3b0..b6007870c 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -10,9 +10,11 @@ Implementation of the lucide icon library for web applications. ```bash npm install lucide +``` -#or +or +```sh yarn add lucide ``` @@ -24,9 +26,11 @@ Implementation of the lucide icon library for react applications. ```bash yarn add lucide-react +``` -# or +or +```sh npm install lucide-react ``` @@ -38,9 +42,11 @@ Implementation of the lucide icon library for vue applications. ```bash yarn add lucide-vue +``` -# or +or +```sh npm install lucide-vue ``` @@ -52,9 +58,11 @@ Implementation of the lucide icon library for vue applications. ```bash yarn add lucide-vue-next +``` -# or +or +```sh npm install lucide-vue-next ``` @@ -66,9 +74,11 @@ Implementation of the lucide icon library for vue applications. ```bash yarn add lucide-svelte +``` -# or +or +```sh npm install lucide-svelte ``` @@ -78,9 +88,11 @@ For more details, see the [documentation](packages/lucide-svelte). ```bash yarn add lucide-angular +``` -# or +or +```sh npm install lucide-angular ``` @@ -92,9 +104,11 @@ Implementation of the lucide icon library for preact applications. ```bash yarn add lucide-preact +``` -# or +or +```sh npm install lucide-preact ``` @@ -106,7 +120,7 @@ The lucide figma plugin. Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin. -![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover") +![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail 'Figma Lucide Cover') ## Laravel diff --git a/docs/packages/lucide-angular.md b/docs/packages/lucide-angular.md index 10e07cbd6..72651b7ef 100644 --- a/docs/packages/lucide-angular.md +++ b/docs/packages/lucide-angular.md @@ -4,11 +4,13 @@ Implementation of the lucide icon library for angular applications. ## Installation -``` sh +```sh yarn add lucide-angular +``` -# or +or +```sh npm install lucide-angular ``` @@ -20,12 +22,12 @@ There are three ways for use this library. After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`. -``` html +```html
``` -``` js +```js // app.component.ts import { Component, OnInit } from '@angular/core'; @@ -37,7 +39,6 @@ import { Activity } from 'lucide-angular/icons'; templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) - export class AppComponent implements OnInit { ngOnInit(): void { const div = document.getElementById('lucide-icon'); @@ -51,11 +52,11 @@ export class AppComponent implements OnInit { } ``` -### Method 2: User __Tag__ with __name__ property +### Method 2: User **Tag** with **name** property After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`. -``` js +```js // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -65,32 +66,29 @@ import { AppComponent } from './app.component'; import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular'; @NgModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, - LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported. + LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported. ], providers: [], bootstrap: [AppComponent] }) - -export class AppModule { } +export class AppModule {} ``` -``` html +```html ``` -### Method 3: User __Tag__ with __img__ property +### Method 3: User **Tag** with **img** property After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`. -``` js +```js // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -100,28 +98,21 @@ import { AppComponent } from './app.component'; import { LucideAngularModule } from 'lucide-angular'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - AppRoutingModule, - LucideAngularModule.pick({ }) - ], + declarations: [AppComponent], + imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})], providers: [], bootstrap: [AppComponent] }) - -export class AppModule { } +export class AppModule {} ``` -``` xml +```xml ``` -``` js +```js // app.component.ts import { Component } from '@angular/core'; import { Airplay, Circle } from 'lucide-angular'; @@ -131,7 +122,6 @@ import { Airplay, Circle } from 'lucide-angular'; templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) - export class AppComponent { ico1 = Airplay; ico2 = Circle; @@ -144,7 +134,7 @@ export class AppComponent { In `Method 2`: import all icons in `app.module.ts` by: -``` js +```js import { icons } from 'lucide-angular/icons'; diff --git a/docs/packages/lucide-preact.md b/docs/packages/lucide-preact.md index 722860e33..d3a543b07 100644 --- a/docs/packages/lucide-preact.md +++ b/docs/packages/lucide-preact.md @@ -10,9 +10,11 @@ Implementation of the lucide icon library for preact applications. ```sh yarn add lucide-preact +``` -# or +or +```sh npm install lucide-preact ``` @@ -25,13 +27,13 @@ Each icon can be imported as a preact component. You can pass additional props to adjust the icon. -``` js +```js import { Camera } from 'lucide-preact'; // Returns PreactComponent // Usage const App = () => { - return + return ; }; export default App; @@ -39,20 +41,20 @@ export default App; ### Props -| name | type | default -| ------------ | -------- | -------- -| `size` | *Number* | 24 -| `color` | *String* | currentColor -| `strokeWidth`| *Number* | 2 +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `strokeWidth` | _Number_ | 2 | ### Custom props / svg attributes You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes. -``` js +```js // Usage const App = () => { - return + return ; }; ``` @@ -62,17 +64,17 @@ const App = () => { It is possible to create one generic icon component to load icons. -> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. +> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. #### Icon Component Example -``` js +```js import * as icons from 'lucide-preact'; -const Icon = ({name, color, size}) => { +const Icon = ({ name, color, size }) => { const LucideIcon = icons[name]; - return + return ; }; export default Icon; diff --git a/docs/packages/lucide-react-native.md b/docs/packages/lucide-react-native.md index c4f45f4a5..9ccf3a08c 100644 --- a/docs/packages/lucide-react-native.md +++ b/docs/packages/lucide-react-native.md @@ -8,9 +8,11 @@ First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install ```bash yarn add lucide-react-native +``` -# or +or +```sh npm install lucide-react-native ``` diff --git a/docs/packages/lucide-react.md b/docs/packages/lucide-react.md index 40bd1752d..ee8783204 100644 --- a/docs/packages/lucide-react.md +++ b/docs/packages/lucide-react.md @@ -4,11 +4,13 @@ Implementation of the lucide icon library for react applications ## Installation -``` bash +```bash yarn add lucide-react +``` -# or +or +```sh npm install lucide-react ``` @@ -21,13 +23,13 @@ Each icon can be imported as a react component. You can pass additional props to adjust the icon. -``` js +```js import { Camera } from 'lucide-react'; // Returns ReactComponent // Usage const App = () => { - return + return ; }; export default App; @@ -35,20 +37,20 @@ export default App; ### Props -| name | type | default -| ------------ | -------- | -------- -| `size` | *Number* | 24 -| `color` | *String* | currentColor -| `strokeWidth`| *Number* | 2 +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `strokeWidth` | _Number_ | 2 | ### Custom props You can also pass custom props that will be added in the svg as attributes. -``` js +```js // Usage const App = () => { - return + return ; }; ``` @@ -56,17 +58,17 @@ const App = () => { It is possible to create one generic icon component to load icons. -> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. +> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. #### Icon Component Example -``` js +```js import * as icons from 'lucide-react'; -const Icon = ({name, color, size}) => { +const Icon = ({ name, color, size }) => { const LucideIcon = icons[name]; - return + return ; }; export default Icon; diff --git a/docs/packages/lucide-static.md b/docs/packages/lucide-static.md index e184a7905..a753b9147 100644 --- a/docs/packages/lucide-static.md +++ b/docs/packages/lucide-static.md @@ -19,23 +19,25 @@ This package is suitable for very specific use cases for example if you want to ```sh yarn add lucide-static +``` -# or +or +```sh npm install lucide-static ``` ### CDN -``` html +```html - + ``` @@ -50,14 +52,14 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit To use it in for example html: -``` html +```html - + ``` -``` css +```css .home-icon { - background-image: url(~lucide-static/icons/home.svg) + background-image: url(~lucide-static/icons/home.svg); } ``` @@ -69,7 +71,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/). ```js -import arrowRightIcon from 'lucide-static/icons/arrow-right' +import arrowRightIcon from 'lucide-static/icons/arrow-right'; // return string of a svg ``` @@ -80,7 +82,7 @@ You may need additional loader for this. ```html - + ``` - ### Node.js To use lucide icons in your Nodejs project you can import each icon as: ```js -const { messageSquare } = require('lucide-static/lib') +const { messageSquare } = require('lucide-static/lib'); ``` > Note: Each icon name is in camelCase. @@ -154,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib') #### Example in node.js project ```js -const express = require('express') -const { messageSquare } = require('lucide-static/lib') -const app = express() -const port = 3000 +const express = require('express'); +const { messageSquare } = require('lucide-static/lib'); +const app = express(); +const port = 3000; app.get('/', (req, res) => { res.send(` @@ -172,10 +173,10 @@ app.get('/', (req, res) => { - `) -}) + `); +}); app.listen(port, () => { - console.log(`Example app listening at http://localhost:${port}`) -}) + console.log(`Example app listening at http://localhost:${port}`); +}); ``` diff --git a/docs/packages/lucide-svelte.md b/docs/packages/lucide-svelte.md index 3d77c4a70..b47b8760c 100644 --- a/docs/packages/lucide-svelte.md +++ b/docs/packages/lucide-svelte.md @@ -6,9 +6,11 @@ Implementation of the lucide icon library for svelte applications. ```bash yarn add lucide-svelte +``` -# or +or +```sh npm install lucide-svelte ``` @@ -22,17 +24,17 @@ Default usage: ```html - + ``` You can pass additional props to adjust the icon. ```html @@ -40,12 +42,12 @@ import { Camera } from 'lucide-svelte' ### Available props -| name | type | default -| -------------- | -------- | -------- -| `size` | *Number* | 24 -| `color` | *String* | currentColor -| `strokeWidth` | *Number* | 2 -| `*` | *String* | - +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `strokeWidth` | _Number_ | 2 | +| `*` | _String_ | - | \* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) @@ -53,10 +55,10 @@ import { Camera } from 'lucide-svelte' ```html - + ``` This results a filled phone icon. @@ -69,20 +71,20 @@ It is possible to create one generic icon component to load icons. #### Icon Component Example -``` html +```html - + ``` ##### Then you can use it like this -``` html +```html diff --git a/docs/packages/lucide-vue.md b/docs/packages/lucide-vue.md index 34a95bdb8..1efd75409 100644 --- a/docs/packages/lucide-vue.md +++ b/docs/packages/lucide-vue.md @@ -8,9 +8,11 @@ Implementation of the lucide icon library for Vue applications. ```sh yarn add lucide-vue +``` -# or +or +```sh npm install lucide-vue ``` @@ -23,40 +25,36 @@ Each icon can be imported as a vue component. You can pass additional props to adjust the icon. -``` html +```html ``` ### Props -| name | type | default -| ------------ | -------- | -------- -| `size` | *Number* | 24 -| `color` | *String* | currentColor -| `strokeWidth`| *Number* | 2 -| `defaultClass`| *String* | lucide-icon +| name | type | default | +| -------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `strokeWidth` | _Number_ | 2 | +| `defaultClass` | _String_ | lucide-icon | ### Custom props You can also pass custom props that will be added in the svg as attributes. -``` html +```html @@ -70,33 +68,33 @@ It is possible to create one generic icon component to load icons. #### Icon Component Example -``` html +```html ``` ##### Then you can use it like this -``` html +```html
diff --git a/docs/packages/lucide.md b/docs/packages/lucide.md index 64959d2c8..53d2da778 100644 --- a/docs/packages/lucide.md +++ b/docs/packages/lucide.md @@ -6,15 +6,19 @@ Implementation of the lucide icon library for web applications. ### Package Managers -``` bash +```sh npm install lucide -#or +``` + +or + +```sh yarn add lucide ``` ### CDN -``` html +```html @@ -56,7 +60,7 @@ The `createIcons` function will search for HTMLElements with the attribute `icon import { createIcons, icons } from 'lucide'; // Caution, this will import all the icons and bundle them. -createIcons({icons}); +createIcons({ icons }); // Recommended way, to include only the icons you need. import { createIcons, Menu, ArrowRight, Globe } from 'lucide'; @@ -65,8 +69,8 @@ createIcons({ icons: { Menu, ArrowRight, - Globe, - }, + Globe + } }); ``` @@ -83,9 +87,9 @@ createIcons({ attrs: { class: ['my-custom-class', 'icon'], 'stroke-width': 1, - stroke: '#333', + stroke: '#333' }, - nameAttr: 'icon-name', // attribute for the icon name. + nameAttr: 'icon-name' // attribute for the icon name. }); ``` @@ -98,8 +102,8 @@ createIcons({ icons: { Menu, ArrowRight, - Globe, - }, + Globe + } }); ``` diff --git a/packages/lucide-angular/README.md b/packages/lucide-angular/README.md index ce3a22ac8..e663477da 100644 --- a/packages/lucide-angular/README.md +++ b/packages/lucide-angular/README.md @@ -6,11 +6,13 @@ Implementation of the lucide icon library for angular applications. ## Installation -``` sh +```sh yarn add lucide-angular +``` -# or +or +```sh npm install lucide-angular ``` @@ -22,12 +24,12 @@ There are three ways for use this library. After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`. -``` html +```html
``` -``` js +```js // app.component.ts import { Component, OnInit } from '@angular/core'; @@ -39,7 +41,6 @@ import { Activity } from 'lucide-angular/icons'; templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) - export class AppComponent implements OnInit { ngOnInit(): void { const div = document.getElementById('lucide-icon'); @@ -53,11 +54,11 @@ export class AppComponent implements OnInit { } ``` -### Method 2: User __Tag__ with __name__ property +### Method 2: User **Tag** with **name** property After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`. -``` js +```js // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -67,31 +68,29 @@ import { AppComponent } from './app.component'; import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular'; @NgModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, - LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported. + LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported. ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule {} ``` -``` html +```html ``` -### Method 3: User __Tag__ with __img__ property +### Method 3: User **Tag** with **img** property After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`. -``` js +```js // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -101,27 +100,21 @@ import { AppComponent } from './app.component'; import { LucideAngularModule } from 'lucide-angular'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - AppRoutingModule, - LucideAngularModule.pick({ }) - ], + declarations: [AppComponent], + imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule {} ``` -``` xml +```xml ``` -``` js +```js // app.component.ts import { Component } from '@angular/core'; import { Airplay, Circle } from 'lucide-angular'; @@ -131,7 +124,6 @@ import { Airplay, Circle } from 'lucide-angular'; templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) - export class AppComponent { ico1 = Airplay; ico2 = Circle; @@ -144,7 +136,7 @@ export class AppComponent { In `Method 2`: import all icons in `app.module.ts` by: -``` js +```js ... import { icons } from 'lucide-angular/icons'; .... diff --git a/packages/lucide-preact/README.md b/packages/lucide-preact/README.md index 79931655c..ec0e9df54 100644 --- a/packages/lucide-preact/README.md +++ b/packages/lucide-preact/README.md @@ -8,9 +8,11 @@ Implementation of the lucide icon library for preact applications. ```sh yarn add lucide-preact +``` -# or +or +```sh npm install lucide-preact ``` @@ -23,13 +25,13 @@ Each icon can be imported as a preact component. You can pass additional props to adjust the icon. -``` js +```js import { Camera } from 'lucide-preact'; // Returns PreactComponent // Usage const App = () => { - return + return ; }; export default App; @@ -37,20 +39,20 @@ export default App; ### Props -| name | type | default -| ------------ | -------- | -------- -| `size` | *Number* | 24 -| `color` | *String* | currentColor -| `strokeWidth`| *Number* | 2 +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `strokeWidth` | _Number_ | 2 | ### Custom props / svg attributes You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes. -``` js +```js // Usage const App = () => { - return + return ; }; ``` @@ -60,17 +62,17 @@ const App = () => { It is possible to create one generic icon component to load icons. -> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. +> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. #### Icon Component Example -``` js +```js import * as icons from 'lucide-preact'; -const Icon = ({name, color, size}) => { +const Icon = ({ name, color, size }) => { const LucideIcon = icons[name]; - return + return ; }; export default Icon; diff --git a/packages/lucide-react-native/README.md b/packages/lucide-react-native/README.md index 9d14de470..cff15d607 100644 --- a/packages/lucide-react-native/README.md +++ b/packages/lucide-react-native/README.md @@ -10,9 +10,11 @@ First, ensure that you have`react-native-svg@^12.0.0` or `react-native-svg@^13.0 ```sh yarn add lucide-react-native +``` -# or +or +```sh npm install lucide-react-native ``` diff --git a/packages/lucide-react/README.md b/packages/lucide-react/README.md index 24b6c0ac0..4c3229d5a 100644 --- a/packages/lucide-react/README.md +++ b/packages/lucide-react/README.md @@ -8,9 +8,11 @@ Implementation of the lucide icon library for react applications. ```sh yarn add lucide-react +``` -# or +or +```sh npm install lucide-react ``` @@ -23,11 +25,11 @@ Each icon can be imported as a react component. You can pass additional props to adjust the icon. -``` js +```js import { Camera } from 'lucide-react'; const App = () => { - return + return ; }; export default App; @@ -35,19 +37,19 @@ export default App; ### Props -| name | type | default -| ------------ | -------- | -------- -| `size` | *Number* | 24 -| `color` | *String* | currentColor -| `strokeWidth`| *Number* | 2 +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `strokeWidth` | _Number_ | 2 | ### Custom props You can also pass custom props that will be added in the svg as attributes. -``` js +```js const App = () => { - return + return ; }; ``` @@ -57,13 +59,13 @@ It is possible to create a generic icon component to load icons. > :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially. -``` js +```js import * as icons from 'lucide-react'; -const Icon = ({name, color, size}) => { +const Icon = ({ name, color, size }) => { const LucideIcon = icons[name]; - return + return ; }; export default Icon; diff --git a/packages/lucide-solid/README.md b/packages/lucide-solid/README.md index 78a8b1c7a..211c91ce1 100644 --- a/packages/lucide-solid/README.md +++ b/packages/lucide-solid/README.md @@ -8,9 +8,11 @@ Implementation of the lucide icon library for solid applications. ```sh yarn add lucide-solid +``` -# or +or +```sh npm install lucide-solid ``` @@ -23,13 +25,13 @@ Each icon can be imported as a solid component. You can pass additional props to adjust the icon. -``` js +```js import { Camera } from 'lucide-solid'; // Returns SolidComponent // Usage const App = () => { - return + return ; }; export default App; @@ -37,20 +39,20 @@ export default App; ### Props -| name | type | default -| ------------ | -------- | -------- -| `size` | *Number* | 24 -| `color` | *String* | currentColor -| `strokeWidth`| *Number* | 2 +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `strokeWidth` | _Number_ | 2 | ### Custom props / svg attributes You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes. -``` js +```js // Usage const App = () => { - return + return ; }; ``` @@ -58,11 +60,11 @@ const App = () => { It is possible to create one generic icon component to load icons. -> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. +> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. #### Icon Component Example -``` tsx +```tsx import * as icons from 'lucide-solid'; import type { LucideProps } from 'lucide-solid'; import { splitProps } from 'solid-js'; diff --git a/packages/lucide-static/README.md b/packages/lucide-static/README.md index dd067f6b8..c4c08b250 100644 --- a/packages/lucide-static/README.md +++ b/packages/lucide-static/README.md @@ -21,23 +21,25 @@ This package is suitable for very specific use cases for example if you want to ```sh yarn add lucide-static +``` -# or +or +```sh npm install lucide-static ``` ### CDN -``` html +```html - + ``` @@ -52,16 +54,17 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit To use it in for example html: -``` html +```html - + ``` -``` css +```css .home-icon { - background-image: url(~lucide-static/icons/home.svg) + background-image: url(~lucide-static/icons/home.svg); } ``` + Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/) #### Svg file Inline @@ -70,7 +73,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/). ```js -import arrowRightIcon from 'lucide-static/icons/arrow-right' +import arrowRightIcon from 'lucide-static/icons/arrow-right'; // return string of a svg ``` @@ -81,7 +84,7 @@ You may need additional loader for this. ```html - + - - ...sprite svg - +...sprite svg ``` If you'd prefer, you can use CSS to hold your base SVG properties ```css .lucide-icon { - width: 24px; - height: 24px; - stroke: currentColor; - fill: none; - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; + width: 24px; + height: 24px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; } ``` @@ -134,20 +135,19 @@ and update the svg as follows ### Icon Font ```css -@import("~lucide-static/font/Lucide.css") +@import ('~lucide-static/font/Lucide.css'); ``` ```html
``` - ### Node.js To use lucide icons in your Nodejs project you can import each icon as: ```js -const { messageSquare } = require('lucide-static/lib') +const { messageSquare } = require('lucide-static/lib'); ``` > Note: Each icon name is in camelCase. @@ -155,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib') #### Example in node.js project ```js -const express = require('express') -const { messageSquare } = require('lucide-static/lib') -const app = express() -const port = 3000 +const express = require('express'); +const { messageSquare } = require('lucide-static/lib'); +const app = express(); +const port = 3000; app.get('/', (req, res) => { res.send(` @@ -173,12 +173,12 @@ app.get('/', (req, res) => { - `) -}) + `); +}); app.listen(port, () => { - console.log(`Example app listening at http://localhost:${port}`) -}) + console.log(`Example app listening at http://localhost:${port}`); +}); ``` ## Contributing diff --git a/packages/lucide-svelte/README.md b/packages/lucide-svelte/README.md index 640187e16..d60241a71 100644 --- a/packages/lucide-svelte/README.md +++ b/packages/lucide-svelte/README.md @@ -8,9 +8,11 @@ Implementation of the lucide icon library for svelte applications. ```sh yarn add lucide-svelte +``` -# or +or +```sh npm install lucide-svelte ``` @@ -42,14 +44,14 @@ import { Camera } from 'lucide-svelte' ### Available props -| name | type | default -| -------------- | -------- | -------- -| `size` | *Number* | 24 -| `color` | *String* | currentColor -| `strokeWidth` | *Number* | 2 -| `*` | *String* | - +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `strokeWidth` | _Number_ | 2 | +| `*` | _String_ | - | -* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) +- All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) ### Example of custom props @@ -71,7 +73,7 @@ It is possible to create one generic icon component to load icons. #### Icon Component Example -``` svelte +```svelte diff --git a/packages/lucide-vue-next/README.md b/packages/lucide-vue-next/README.md index a34d2ca7e..a0418782e 100644 --- a/packages/lucide-vue-next/README.md +++ b/packages/lucide-vue-next/README.md @@ -10,9 +10,11 @@ Implementation of the lucide icon library for Vue 3 applications. ```sh yarn add lucide-vue-next +``` -# or +or +```sh npm install lucide-vue-next ``` @@ -25,12 +27,9 @@ Each icon can be imported as a vue component. You can pass additional props to adjust the icon. -``` vue +```vue ``` ### Props -| name | type | default -| ------------ | -------- | -------- -| `size` | *Number* | 24 -| `color` | *String* | currentColor -| `strokeWidth`| *Number* | 2 -| `defaultClass`| *String* | lucide-icon +| name | type | default | +| -------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `strokeWidth` | _Number_ | 2 | +| `defaultClass` | _String_ | lucide-icon | ### Custom props You can also pass custom props that will be added in the svg as attributes. -``` vue +```vue @@ -72,33 +70,33 @@ It is possible to create one generic icon component to load icons. #### Icon Component Example -``` vue +```vue ``` ##### Then you can use it like this -``` vue +```vue