From 33be2c24301f630796c721af6190865e502190af Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Thu, 27 Oct 2022 08:19:45 +0200 Subject: [PATCH] Split commands in documentation to make it possible to use Copy to clipboard icon (#853) GitHub adds Copy to clipboard button to all code snippets. By splitting npm and yarn specific snippets into two separate snippets we make it possible to copy the command dev is interested in in one click instead of manually selecting it and copying with Ctrl+C. --- README.md | 41 +++++++++++----- docs/installation.md | 30 +++++++++--- docs/packages/lucide-angular.md | 50 ++++++++----------- docs/packages/lucide-preact.md | 30 ++++++------ docs/packages/lucide-react-native.md | 4 +- docs/packages/lucide-react.md | 32 ++++++------ docs/packages/lucide-static.md | 59 +++++++++++----------- docs/packages/lucide-svelte.md | 36 +++++++------- docs/packages/lucide-vue.md | 68 +++++++++++++------------- docs/packages/lucide.md | 24 +++++---- packages/lucide-angular/README.md | 48 ++++++++---------- packages/lucide-preact/README.md | 30 ++++++------ packages/lucide-react-native/README.md | 4 +- packages/lucide-react/README.md | 28 ++++++----- packages/lucide-solid/README.md | 26 +++++----- packages/lucide-static/README.md | 64 ++++++++++++------------ packages/lucide-svelte/README.md | 22 +++++---- packages/lucide-vue-next/README.md | 44 ++++++++--------- packages/lucide-vue/README.md | 50 ++++++++++--------- packages/lucide/README.md | 24 +++++---- 20 files changed, 377 insertions(+), 337 deletions(-) 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