diff --git a/README.md b/README.md index 81235994f..90e655232 100644 --- a/README.md +++ b/README.md @@ -274,9 +274,12 @@ Thank you to all the people who contributed to Lucide! ## Sponsors - Powered by Vercel DigitalOcean Referral Badge + +### Awesome backer 🍺 + +Scipress sponsor badge diff --git a/docs/public/package-logos/dark/lucide-angular.svg b/docs/public/package-logos/dark/lucide-angular.svg new file mode 100644 index 000000000..10d366c4e --- /dev/null +++ b/docs/public/package-logos/dark/lucide-angular.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/dark/lucide-preact.svg b/docs/public/package-logos/dark/lucide-preact.svg new file mode 100644 index 000000000..04c69d57e --- /dev/null +++ b/docs/public/package-logos/dark/lucide-preact.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/dark/lucide-react-native.svg b/docs/public/package-logos/dark/lucide-react-native.svg new file mode 100644 index 000000000..99245bd2f --- /dev/null +++ b/docs/public/package-logos/dark/lucide-react-native.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/dark/lucide-react.svg b/docs/public/package-logos/dark/lucide-react.svg new file mode 100644 index 000000000..62aac8c14 --- /dev/null +++ b/docs/public/package-logos/dark/lucide-react.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/dark/lucide-solid.svg b/docs/public/package-logos/dark/lucide-solid.svg new file mode 100644 index 000000000..adb63e1b7 --- /dev/null +++ b/docs/public/package-logos/dark/lucide-solid.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/dark/lucide-static.svg b/docs/public/package-logos/dark/lucide-static.svg new file mode 100644 index 000000000..84106a206 --- /dev/null +++ b/docs/public/package-logos/dark/lucide-static.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/dark/lucide-svelte.svg b/docs/public/package-logos/dark/lucide-svelte.svg new file mode 100644 index 000000000..e7caa4912 --- /dev/null +++ b/docs/public/package-logos/dark/lucide-svelte.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/docs/public/package-logos/dark/lucide-vue.svg b/docs/public/package-logos/dark/lucide-vue.svg new file mode 100644 index 000000000..74961aa18 --- /dev/null +++ b/docs/public/package-logos/dark/lucide-vue.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/docs/public/package-logos/dark/lucide.svg b/docs/public/package-logos/dark/lucide.svg new file mode 100644 index 000000000..2a1366233 --- /dev/null +++ b/docs/public/package-logos/dark/lucide.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/docs/public/package-logos/lucide-angular.svg b/docs/public/package-logos/lucide-angular.svg index 9aff8cde6..3ffd2d6cb 100644 --- a/docs/public/package-logos/lucide-angular.svg +++ b/docs/public/package-logos/lucide-angular.svg @@ -1,15 +1,27 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/lucide-flutter.svg b/docs/public/package-logos/lucide-flutter.svg deleted file mode 100644 index 3313619ae..000000000 --- a/docs/public/package-logos/lucide-flutter.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/docs/public/package-logos/lucide-preact.svg b/docs/public/package-logos/lucide-preact.svg index 7659de9d3..98a2227a6 100644 --- a/docs/public/package-logos/lucide-preact.svg +++ b/docs/public/package-logos/lucide-preact.svg @@ -1,15 +1,15 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/lucide-react-native.svg b/docs/public/package-logos/lucide-react-native.svg index 5bcafa436..5400d4ad0 100644 --- a/docs/public/package-logos/lucide-react-native.svg +++ b/docs/public/package-logos/lucide-react-native.svg @@ -1,16 +1,26 @@ - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/lucide-react.svg b/docs/public/package-logos/lucide-react.svg index 9dc73199a..2e638d272 100644 --- a/docs/public/package-logos/lucide-react.svg +++ b/docs/public/package-logos/lucide-react.svg @@ -1,15 +1,15 @@ - - - - - - - - - + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/lucide-solid.svg b/docs/public/package-logos/lucide-solid.svg index caab9f37f..21304bd45 100644 --- a/docs/public/package-logos/lucide-solid.svg +++ b/docs/public/package-logos/lucide-solid.svg @@ -1,44 +1,39 @@ - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/lucide-static.svg b/docs/public/package-logos/lucide-static.svg index d3df58411..9dfa96992 100644 --- a/docs/public/package-logos/lucide-static.svg +++ b/docs/public/package-logos/lucide-static.svg @@ -1,16 +1,16 @@ - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/docs/public/package-logos/lucide-svelte.svg b/docs/public/package-logos/lucide-svelte.svg index df5863ce4..4ab04e88d 100644 --- a/docs/public/package-logos/lucide-svelte.svg +++ b/docs/public/package-logos/lucide-svelte.svg @@ -1,13 +1,13 @@ - - - - - - - - - + + + + + + + + + + + + diff --git a/docs/public/package-logos/lucide-vue-next.svg b/docs/public/package-logos/lucide-vue-next.svg deleted file mode 100644 index 304cb803a..000000000 --- a/docs/public/package-logos/lucide-vue-next.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - diff --git a/docs/public/package-logos/lucide-vue.svg b/docs/public/package-logos/lucide-vue.svg index 3f30d654e..6a21dbb8a 100644 --- a/docs/public/package-logos/lucide-vue.svg +++ b/docs/public/package-logos/lucide-vue.svg @@ -1,14 +1,13 @@ - - - - - - - - - - + + + + + + + + + + + + diff --git a/docs/public/package-logos/lucide.svg b/docs/public/package-logos/lucide.svg index 709b33784..8c2a462e0 100644 --- a/docs/public/package-logos/lucide.svg +++ b/docs/public/package-logos/lucide.svg @@ -1,13 +1,13 @@ - - - - - - - - - + + + + + + + + + + + + diff --git a/docs/public/sponsors/scipress.svg b/docs/public/sponsors/scipress.svg new file mode 100644 index 000000000..12f5f0905 --- /dev/null +++ b/docs/public/sponsors/scipress.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/lucide-angular/README.md b/packages/lucide-angular/README.md index 2450b502e..d3bb79dfe 100644 --- a/packages/lucide-angular/README.md +++ b/packages/lucide-angular/README.md @@ -1,3 +1,12 @@ +

+ + Lucide Angular - Implementation of the lucide icon library for angular applications. + + + Lucide Angular - Implementation of the lucide icon library for angular applications. + +

+ # Lucide Angular Implementation of the lucide icon library for angular applications. @@ -16,96 +25,26 @@ or npm install lucide-angular ``` -## How to use +## Documentation -### Step 1: Import `LucideAngularModule` +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-angular) -In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use: +## Community -```js -import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular'; +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -@NgModule({ - imports: [ - LucideAngularModule.pick({File, Home, Menu, UserCheck}) - ] -}) -export class AppModule { } -``` +## License -### Step 2: Use the icons in templates +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -Within your templates you may now use one of the following component tags to insert an icon: +## Sponsors -```html - - - - -``` + + Powered by Vercel + -### Props +DigitalOcean Referral Badge -You can pass additional props to adjust the icon appearance. +### Awesome backer 🍺 -| name | type | default | -| ------------------ | --------- | ------------ | -| `size` | _number_ | 24 | -| `color` | _string_ | currentColor | -| `strokeWidth` | _number_ | 2 | -| `absoluteStrokeWidth` | _boolean_ | true | - -```html - -``` - -### Global configuration - -You can inject the `LucideIconConfig` service in your root component to globally configure the default property values as defined above. - -### Styling using a custom CSS class - -Any extra HTML attribute is ignored, but the `class` attribute -is passed onto the internal SVG image element and it can be used to style it: - -```css -svg.my-icon { - width: 12px; - height: 12px; - stroke-width: 3; -} -``` - -## Injecting multiple icon providers - -You may provide additional icons using the `LUCIDE_ICONS` injection token, -which accepts multiple providers of the interface `LucideIconsProviderInterface` -with the utility class `LucideIconsProvider` available for easier usage: - -```js -import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular'; -import { MyIcon } from './icons/my-icon'; - -const myIcons = {MyIcon}; - -@NgModule({ - providers: [ - {provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)}, - ] -}) -export class AppModule { } -``` - -To add custom icons, you will first need to convert them to an [svgson format](https://github.com/elrumordelaluz/svgson). - -## Loading all icons - -> :warning: You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size. - -```js -import { icons } from 'lucide-angular'; - -... - -LucideAngularModule.pick(icons) -``` +Scipress sponsor badge diff --git a/packages/lucide-preact/README.md b/packages/lucide-preact/README.md index ec0e9df54..153224112 100644 --- a/packages/lucide-preact/README.md +++ b/packages/lucide-preact/README.md @@ -1,3 +1,12 @@ +

+ + Lucide Preact - Implementation of the lucide icon library for preact applications. + + + Lucide Preact - Implementation of the lucide icon library for preact applications. + +

+ # Lucide Preact Implementation of the lucide icon library for preact applications. @@ -16,64 +25,26 @@ or npm install lucide-preact ``` -## How to use +## Documentation -It's build with ESmodules so it's completely tree-shakable. -Each icon can be imported as a preact component. +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-preact) -### Example +## Community -You can pass additional props to adjust the icon. +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -```js -import { Camera } from 'lucide-preact'; -// Returns PreactComponent +## License -// Usage -const App = () => { - return ; -}; +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -export default App; -``` +## Sponsors -### Props + + Powered by Vercel + -| name | type | default | -| ------------- | -------- | ------------ | -| `size` | _Number_ | 24 | -| `color` | _String_ | currentColor | -| `strokeWidth` | _Number_ | 2 | +DigitalOcean Referral Badge -### Custom props / svg attributes +### Awesome backer 🍺 -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 -// Usage -const App = () => { - return ; -}; -``` - -> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx). - -### One generic icon component - -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. - -#### Icon Component Example - -```js -import * as icons from 'lucide-preact'; - -const Icon = ({ name, color, size }) => { - const LucideIcon = icons[name]; - - return ; -}; - -export default Icon; -``` +Scipress sponsor badge diff --git a/packages/lucide-react-native/README.md b/packages/lucide-react-native/README.md index 561b84544..4fed29661 100644 --- a/packages/lucide-react-native/README.md +++ b/packages/lucide-react-native/README.md @@ -1,3 +1,13 @@ +

+ + Lucide React Native - Implementation of the lucide icon library for React Native applications. + + + Lucide React Native - Implementation of the lucide icon library for React Native applications. + +

+ + # Lucide React Native Implementation of the lucide icon library for React Native applications. @@ -18,57 +28,26 @@ or npm install lucide-react-native ``` -## How to use +## Documentation -It's built with ES modules so it's completely tree-shakable. -Each icon can be imported as a react component. +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-react-native) -### Example +## Community -You can pass additional props to adjust the icon. +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -```js -import { Camera } from 'lucide-react-native'; +## License -const App = () => { - return ; -}; +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -export default App; -``` +## Sponsors -### Props + + Powered by Vercel + -| name | type | default | -| ------------- | -------- | ------------ | -| `size` | _Number_ | 24 | -| `color` | _String_ | currentColor | -| `strokeWidth` | _Number_ | 2 | +DigitalOcean Referral Badge -### Custom props +### Awesome backer 🍺 -You can also pass custom props that will be added in the svg as attributes. - -```js -const App = () => { - return ; -}; -``` - -### Generic icon component - -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 -import * as icons from 'lucide-react-native'; - -const Icon = ({ name, color, size }) => { - const LucideIcon = icons[name]; - - return ; -}; - -export default Icon; -``` +Scipress sponsor badge diff --git a/packages/lucide-react/README.md b/packages/lucide-react/README.md index beeb4b9c4..2bb1c106c 100644 --- a/packages/lucide-react/README.md +++ b/packages/lucide-react/README.md @@ -1,3 +1,13 @@ +

+ + Lucide React - Implementation of the lucide icon library for preact applications. + + + Lucide React - Implementation of the lucide icon library for preact applications. + +

+ + # Lucide React Implementation of the lucide icon library for react applications. @@ -16,127 +26,26 @@ or npm install lucide-react ``` -## How to use +## Documentation -It's built with ES modules so it's completely tree-shakable. -Each icon can be imported as a react component. +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-react) -### Example +## Community -You can pass additional props to adjust the icon. +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -```js -import { Camera } from 'lucide-react'; +## License -const App = () => { - return ; -}; +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -export default App; -``` +## Sponsors -### Props + + Powered by Vercel + -| name | type | default | -| ------------- | -------- | ------------ | -| `size` | _Number_ | 24 | -| `color` | _String_ | currentColor | -| `strokeWidth` | _Number_ | 2 | +DigitalOcean Referral Badge -### Custom props +### Awesome backer 🍺 -You can also pass custom props that will be added in the svg as attributes. - -```js -const App = () => { - return ; -}; -``` - -### Generic icon component - -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 -import { icons } from 'lucide-react'; - -const Icon = ({ name, color, size }) => { - const LucideIcon = icons[name]; - - return ; -}; - -export default Icon; -``` - -#### With 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. - -When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size. - -The keys of the dynamic import map are the lucide original icon names. - -Example with React suspense: - -```tsx -import React, { lazy, Suspense } from 'react'; -import { LucideProps } from 'lucide-react'; -import dynamicIconImports from 'lucide-react/dynamicIconImports'; - -const fallback =
- -interface IconProps extends Omit { - name: keyof typeof dynamicIconImports; -} - -const Icon = ({ name, ...props }: IconProps) => { - const LucideIcon = lazy(dynamicIconImports[name]); - - return ( - - - - ); -} - -export default Icon -``` - -##### NextJS Example - -In NextJS, [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to dynamically load the icon component. - -To make dynamic imports work with NextJS, you need to add `lucide-react` to the [`transpilePackages`](https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages) option in your `next.config.js` like this: - -```js -/** @type {import('next').NextConfig} */ -const nextConfig = { - transpilePackages: ['lucide-react'] // add this -} - -module.exports = nextConfig - -``` - -You can then start using it: - -```tsx -import dynamic from 'next/dynamic' -import { LucideProps } from 'lucide-react'; -import dynamicIconImports from 'lucide-react/dynamicIconImports'; - -interface IconProps extends LucideProps { - name: keyof typeof dynamicIconImports; -} - -const Icon = ({ name, ...props }: IconProps) => { - const LucideIcon = dynamic(dynamicIconImports[name]) - - return ; -}; - -export default Icon; -``` +Scipress sponsor badge diff --git a/packages/lucide-solid/README.md b/packages/lucide-solid/README.md index 211c91ce1..8e6187ed7 100644 --- a/packages/lucide-solid/README.md +++ b/packages/lucide-solid/README.md @@ -1,3 +1,13 @@ +

+ + Lucide Solid - Implementation of the lucide icon library for solid applications. + + + Lucide Solid - Implementation of the lucide icon library for solid applications. + +

+ + # Lucide Solid Implementation of the lucide icon library for solid applications. @@ -16,65 +26,26 @@ or npm install lucide-solid ``` -## How to use +## Documentation -It's build with ESmodules so it's completely tree-shakable. -Each icon can be imported as a solid component. +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-solid) -### Example +## Community -You can pass additional props to adjust the icon. +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -```js -import { Camera } from 'lucide-solid'; -// Returns SolidComponent +## License -// Usage -const App = () => { - return ; -}; +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -export default App; -``` +## Sponsors -### Props + + Powered by Vercel + -| name | type | default | -| ------------- | -------- | ------------ | -| `size` | _Number_ | 24 | -| `color` | _String_ | currentColor | -| `strokeWidth` | _Number_ | 2 | +DigitalOcean Referral Badge -### Custom props / svg attributes +### Awesome backer 🍺 -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 -// Usage -const App = () => { - return ; -}; -``` - -### One generic icon component - -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. - -#### Icon Component Example - -```tsx -import * as icons from 'lucide-solid'; -import type { LucideProps } from 'lucide-solid'; -import { splitProps } from 'solid-js'; -import { Dynamic } from 'solid-js/web'; - -const Icon = (props: { name: keyof typeof icons } & LucideProps) => { - const [local, others] = splitProps(props, ["name"]); - - return -}; - -export default Icon; -``` +Scipress sponsor badge diff --git a/packages/lucide-static/README.md b/packages/lucide-static/README.md index 93fa392c7..3011c7b05 100644 --- a/packages/lucide-static/README.md +++ b/packages/lucide-static/README.md @@ -1,3 +1,13 @@ +

+ + Lucide Static - Implementation of the lucide icon library for web applications. + + + Lucide Static - Implementation of the lucide icon library for web applications. + +

+ + # Lucide Static This package include the following lucide implementations: @@ -30,168 +40,26 @@ or npm install lucide-static ``` -### CDN +## Documentation -```html - - - - - -``` - -## Usage - -Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk). - -### SVG Files - -#### Svg file as image - -To use it in for example html: - -```html - - -``` - -```css -.home-icon { - 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 - -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'; - -// return string of a svg -``` - -### SVG Sprite - -You may need additional loader for this. - -```html - - - - - - - - -...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; -} -``` - -and update the svg as follows - -```svg - - - - - ...sprite svg - -``` - -### Icon Font - -```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'); -``` - -> Note: Each icon name is in camelCase. - -#### Example in node.js project - -```js -const express = require('express'); -const { messageSquare } = require('lucide-static/lib'); -const app = express(); -const port = 3000; - -app.get('/', (req, res) => { - res.send(` - - - - Page Title - - -

Lucide Icons

-

This is a lucide icon ${messageSquare}

- - - - `); -}); - -app.listen(port, () => { - console.log(`Example app listening at http://localhost:${port}`); -}); -``` - -## Contributing - -For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md). - -Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/main/README.md) +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-static) ## Community -Join the community on our [Discord](https://discord.gg/EH6nSts) server! +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. ## License -Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/main/LICENSE). +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). + +## Sponsors + + + Powered by Vercel + + +DigitalOcean Referral Badge + +### Awesome backer 🍺 + +Scipress sponsor badge diff --git a/packages/lucide-svelte/README.md b/packages/lucide-svelte/README.md index d60241a71..43f695433 100644 --- a/packages/lucide-svelte/README.md +++ b/packages/lucide-svelte/README.md @@ -1,3 +1,13 @@ +

+ + Lucide Svelte - Implementation of the lucide icon library for svelte applications. + + + Lucide Svelte - Implementation of the lucide icon library for web applications. + +

+ + # Lucide Svelte Implementation of the lucide icon library for svelte applications. @@ -16,78 +26,26 @@ or npm install lucide-svelte ``` -## How to use +## Documentation -All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use. +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-svelte) -### Example +## Community -Default usage: +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -```sv - +## License - -``` +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -You can pass additional props to adjust the icon. +## Sponsors -```sv - + + Powered by Vercel + - -``` +DigitalOcean Referral Badge -### Available props +### Awesome backer 🍺 -| 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) - -### Example of custom props - -```sv - - - -``` - -This results a filled phone icon. - -### One generic icon component - -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 bundle your application,the build size will grow strongly. Because it will import all the icons. - -#### Icon Component Example - -```svelte - - - -``` - -##### Then you can use it like this - -```svelte - - - -``` +Scipress sponsor badge diff --git a/packages/lucide-vue-next/README.md b/packages/lucide-vue-next/README.md index 565dc7c49..29cd48680 100644 --- a/packages/lucide-vue-next/README.md +++ b/packages/lucide-vue-next/README.md @@ -1,3 +1,12 @@ +

+ + Lucide Vue Next - Implementation of the lucide icon library for Vue 3 applications. + + + Lucide Vue Next - Implementation of the lucide icon library for Vue 3 applications. + +

+ # Lucide Vue Next Implementation of the lucide icon library for Vue 3 applications. @@ -18,89 +27,26 @@ or npm install lucide-vue-next ``` -## How to use +## Documentation -It's build with ESmodules so it's completely tree-shakable. -Each icon can be imported as a vue component. +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-vue-next) -### Example +## Community -You can pass additional props to adjust the icon. +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -```vue - +## License - -``` +## Sponsors -### Props + + Powered by Vercel + -| name | type | default | -| ----------------------- | --------- | ------------ | -| `size` | *number* | 24 | -| `color` | *string* | currentColor | -| `stroke-width` | *number* | 2 | -| `absolute-stroke-width` | *boolean* | false | -| `default-class` | *string* | lucide-icon | +DigitalOcean Referral Badge -### Custom props +### Awesome backer 🍺 -You can also pass custom props that will be added in the svg as attributes. - -```vue - -``` - -### One generic icon component - -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. - -#### Icon Component Example - -```vue - - - -``` - -##### Then you can use it like this - -```vue - -``` +Scipress sponsor badge diff --git a/packages/lucide-vue/README.md b/packages/lucide-vue/README.md index b1007b0e5..daa1df611 100644 --- a/packages/lucide-vue/README.md +++ b/packages/lucide-vue/README.md @@ -1,3 +1,12 @@ +

+ + Lucide Vue - Implementation of the lucide icon library for Vue applications. + + + Lucide Vue - Implementation of the lucide icon library for Vue applications. + +

+ # Lucide Vue Implementation of the lucide icon library for Vue applications. @@ -18,111 +27,26 @@ or npm install lucide-vue ``` -## How to use +## Documentation -It's build with ESmodules so it's completely tree-shakable. -Each icon can be imported as a vue component. +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-vue) -### Example +## Community -You can pass additional props to adjust the icon. +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -```vue - +## License - -``` +## Sponsors -### Props + + Powered by Vercel + -| name | type | default | -| ----------------------- | --------- | ------------ | -| `size` | *number* | 24 | -| `color` | *string* | currentColor | -| `stroke-width` | *number* | 2 | -| `absolute-stroke-width` | *boolean* | false | -| `default-class` | *string* | lucide-icon | +DigitalOcean Referral Badge -### Custom props +### Awesome backer 🍺 -You can also pass custom props that will be added in the svg as attributes. - -```vue - -``` - -### One generic icon component - -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. - -#### Icon Component Example - -```vue - - - -``` - -##### Then you can use it like this - -```vue - -``` - -## Use with [@nuxt/components](https://github.com/nuxt/components#readme) - -### Setup - -In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules` - -```js -export default { - buildModules: ['lucide-vue/nuxt'] -}; -``` - -### How to use - -Icon components are prefixed with `Icon`. Use icon components without importing them. - -### Example - -```html - -``` +Scipress sponsor badge diff --git a/packages/lucide/README.md b/packages/lucide/README.md index b75cd9637..ea5a29bb1 100644 --- a/packages/lucide/README.md +++ b/packages/lucide/README.md @@ -1,3 +1,12 @@ +

+ + Lucide - Implementation of the lucide icon library for web applications. + + + Lucide - Implementation of the lucide icon library for web applications. + +

+ # Lucide Implementation of the lucide icon library for web applications. @@ -10,7 +19,9 @@ Implementation of the lucide icon library for web applications. npm install lucide ``` -or +```sh +pnpm install lucide +``` ```sh yarn add lucide @@ -26,99 +37,26 @@ yarn add lucide ``` -## Usage +## Documentation -### With unpkg +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide) -Here is a complete example with unpkg +## Community -```html - - - - - +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. - - - -``` +## License -### With ESModules +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -To reduce bundle size, lucide is built to be fully tree-shakable. -The `createIcons` function will search for HTMLElements with the attribute `data-lucide` and replace it with the svg from the given icon name. +## Sponsors -```html - - -``` + + Powered by Vercel + -```js -import { createIcons, icons } from 'lucide'; +DigitalOcean Referral Badge -// Caution, this will import all the icons and bundle them. -createIcons({ icons }); +### Awesome backer 🍺 -// Recommended way, to include only the icons you need. -import { createIcons, Menu, ArrowRight, Globe } from 'lucide'; - -createIcons({ - icons: { - Menu, - ArrowRight, - Globe - } -}); -``` - -#### Additional Options - -In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes. - -Here is a full example: - -```js -import { createIcons } from 'lucide'; - -createIcons({ - attrs: { - class: ['my-custom-class', 'icon'], - 'stroke-width': 1, - stroke: '#333' - }, - nameAttr: 'data-lucide' // attribute for the icon name. -}); -``` - -#### Treeshake the library, only use the icons you use - -```js -import { createIcons, Menu, ArrowRight, Globe } from 'lucide'; - -createIcons({ - icons: { - Menu, - ArrowRight, - Globe - } -}); -``` - -#### Custom Element binding - -```js -import { createElement, Menu } from 'lucide'; - -const menuIcon = createElement(Menu); // Returns HTMLElement (svg) - -// set custom attributes with browser native functions -menuIcon.setAttribute('stroke', '#333'); -menuIcon.classList.add('my-icon-class'); - -// Append HTMLElement in webpage -const myApp = document.getElementById('app'); -myApp.appendChild(menuIcon); -``` +Scipress sponsor badge diff --git a/tools/build-font/README.md b/tools/build-font/README.md new file mode 100644 index 000000000..51786ac75 --- /dev/null +++ b/tools/build-font/README.md @@ -0,0 +1,3 @@ +# @lucide/build-font + +A internal used package to build the font. diff --git a/tools/build-font/package.json b/tools/build-font/package.json index 3eaa77657..da862f312 100644 --- a/tools/build-font/package.json +++ b/tools/build-font/package.json @@ -1,8 +1,8 @@ { "name": "build-font", + "description": "A internal used package to build the font.", "private": true, "version": "1.0.0", - "description": "", "main": "index.js", "scripts": { "start": "node ./main.mjs" diff --git a/tools/build-icons/README.md b/tools/build-icons/README.md new file mode 100644 index 000000000..c01c3fcb8 --- /dev/null +++ b/tools/build-icons/README.md @@ -0,0 +1,3 @@ +# @lucide/build-icons + +A internal used package to build icon code files for the lucide icon library packages. diff --git a/tools/build-icons/package.json b/tools/build-icons/package.json index 56e70c0cd..92beb4610 100644 --- a/tools/build-icons/package.json +++ b/tools/build-icons/package.json @@ -1,8 +1,7 @@ { "name": "@lucide/build-icons", - "private": true, + "description": "A internal used package to build icon code files for the lucide icon library packages.", "version": "1.0.0", - "description": "", "main": "index.mjs", "type": "module", "scripts": { diff --git a/tools/outline-svg/README.md b/tools/outline-svg/README.md new file mode 100644 index 000000000..dab688975 --- /dev/null +++ b/tools/outline-svg/README.md @@ -0,0 +1,3 @@ +# @lucide/outline-svg + +A internal used package to outline SVGs. diff --git a/tools/outline-svg/package.json b/tools/outline-svg/package.json index 3d2e93c33..dc4f49ce0 100644 --- a/tools/outline-svg/package.json +++ b/tools/outline-svg/package.json @@ -1,8 +1,8 @@ { - "name": "outline-svg", + "name": "@lucide/outline-svg", + "description": "A internal used package to outline SVGs.", "private": true, "version": "2.0.0", - "description": "", "main": "index.js", "scripts": { "start": "node ./main.mjs" diff --git a/tools/rollup-plugins/README.md b/tools/rollup-plugins/README.md new file mode 100644 index 000000000..6caba5acd --- /dev/null +++ b/tools/rollup-plugins/README.md @@ -0,0 +1,3 @@ +# @lucide/rollup-plugins + +A internal used package with a collection of rollup plugins used to build the lucide icon library packages. diff --git a/tools/rollup-plugins/package.json b/tools/rollup-plugins/package.json index a86e39803..26ea9604b 100644 --- a/tools/rollup-plugins/package.json +++ b/tools/rollup-plugins/package.json @@ -1,8 +1,7 @@ { "name": "@lucide/rollup-plugins", - "private": true, "version": "1.0.0", - "description": "", + "description": "A internal used package with a collection of rollup plugins used to build the lucide icon library packages.", "main": "plugins.js", "module": "plugins.js", "author": "",