From 45e82a51b822c0a00c069123fb92c9641d704d0b Mon Sep 17 00:00:00 2001 From: Eric Fennis Date: Wed, 24 Apr 2024 17:43:51 +0200 Subject: [PATCH] docs: Update readme files (#2102) * Update lucide readme * Add Readme and update package.jsons * Update readme * Update package logos * Update darkmode logos * Update title build font readme --- README.md | 5 +- .../package-logos/dark/lucide-angular.svg | 27 +++ .../package-logos/dark/lucide-preact.svg | 15 ++ .../dark/lucide-react-native.svg | 26 +++ .../package-logos/dark/lucide-react.svg | 15 ++ .../package-logos/dark/lucide-solid.svg | 39 ++++ .../package-logos/dark/lucide-static.svg | 16 ++ .../package-logos/dark/lucide-svelte.svg | 13 ++ docs/public/package-logos/dark/lucide-vue.svg | 13 ++ docs/public/package-logos/dark/lucide.svg | 13 ++ docs/public/package-logos/lucide-angular.svg | 40 ++-- docs/public/package-logos/lucide-flutter.svg | 15 -- docs/public/package-logos/lucide-preact.svg | 28 +-- .../package-logos/lucide-react-native.svg | 40 ++-- docs/public/package-logos/lucide-react.svg | 28 +-- docs/public/package-logos/lucide-solid.svg | 81 ++++---- docs/public/package-logos/lucide-static.svg | 30 +-- docs/public/package-logos/lucide-svelte.svg | 24 +-- docs/public/package-logos/lucide-vue-next.svg | 15 -- docs/public/package-logos/lucide-vue.svg | 25 ++- docs/public/package-logos/lucide.svg | 24 +-- docs/public/sponsors/scipress.svg | 6 + packages/lucide-angular/README.md | 105 +++-------- packages/lucide-preact/README.md | 73 +++---- packages/lucide-react-native/README.md | 67 +++---- packages/lucide-react/README.md | 137 +++----------- packages/lucide-solid/README.md | 75 +++----- packages/lucide-static/README.md | 178 +++--------------- packages/lucide-svelte/README.md | 88 +++------ packages/lucide-vue-next/README.md | 98 +++------- packages/lucide-vue/README.md | 120 +++--------- packages/lucide/README.md | 112 +++-------- tools/build-font/README.md | 3 + tools/build-font/package.json | 2 +- tools/build-icons/README.md | 3 + tools/build-icons/package.json | 3 +- tools/outline-svg/README.md | 3 + tools/outline-svg/package.json | 4 +- tools/rollup-plugins/README.md | 3 + tools/rollup-plugins/package.json | 3 +- 40 files changed, 600 insertions(+), 1015 deletions(-) create mode 100644 docs/public/package-logos/dark/lucide-angular.svg create mode 100644 docs/public/package-logos/dark/lucide-preact.svg create mode 100644 docs/public/package-logos/dark/lucide-react-native.svg create mode 100644 docs/public/package-logos/dark/lucide-react.svg create mode 100644 docs/public/package-logos/dark/lucide-solid.svg create mode 100644 docs/public/package-logos/dark/lucide-static.svg create mode 100644 docs/public/package-logos/dark/lucide-svelte.svg create mode 100644 docs/public/package-logos/dark/lucide-vue.svg create mode 100644 docs/public/package-logos/dark/lucide.svg delete mode 100644 docs/public/package-logos/lucide-flutter.svg delete mode 100644 docs/public/package-logos/lucide-vue-next.svg create mode 100644 docs/public/sponsors/scipress.svg create mode 100644 tools/build-font/README.md create mode 100644 tools/build-icons/README.md create mode 100644 tools/outline-svg/README.md create mode 100644 tools/rollup-plugins/README.md diff --git a/README.md b/README.md index 81235994f3..90e655232e 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 0000000000..10d366c4e8 --- /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 0000000000..04c69d57e7 --- /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 0000000000..99245bd2f7 --- /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 0000000000..62aac8c145 --- /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 0000000000..adb63e1b72 --- /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 0000000000..84106a2068 --- /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 0000000000..e7caa49126 --- /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 0000000000..74961aa18a --- /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 0000000000..2a13662333 --- /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 9aff8cde63..3ffd2d6cbf 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 3313619aed..0000000000 --- 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 7659de9d3b..98a2227a6b 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 5bcafa4367..5400d4ad0f 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 9dc73199af..2e638d272c 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 caab9f37fb..21304bd454 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 d3df584111..9dfa969926 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 df5863ce42..4ab04e88d5 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 304cb803a4..0000000000 --- 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 3f30d654ed..6a21dbb8ad 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 709b337849..8c2a462e02 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 0000000000..12f5f09054 --- /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 2450b502e6..d3bb79dfe8 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 - -### Step 1: Import `LucideAngularModule` - -In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use: - -```js -import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular'; - -@NgModule({ - imports: [ - LucideAngularModule.pick({File, Home, Menu, UserCheck}) - ] -}) -export class AppModule { } -``` - -### Step 2: Use the icons in templates - -Within your templates you may now use one of the following component tags to insert an icon: - -```html - - - - -``` - -### Props - -You can pass additional props to adjust the icon appearance. - -| 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 +## Documentation -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: +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-angular) -```js -import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular'; -import { MyIcon } from './icons/my-icon'; +## Community -const myIcons = {MyIcon}; +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -@NgModule({ - providers: [ - {provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)}, - ] -}) -export class AppModule { } -``` +## License -To add custom icons, you will first need to convert them to an [svgson format](https://github.com/elrumordelaluz/svgson). +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -## Loading all icons +## Sponsors -> :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. + + Powered by Vercel + -```js -import { icons } from 'lucide-angular'; +DigitalOcean Referral Badge -... +### Awesome backer 🍺 -LucideAngularModule.pick(icons) -``` +Scipress sponsor badge diff --git a/packages/lucide-preact/README.md b/packages/lucide-preact/README.md index ec0e9df54d..153224112f 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 - -It's build with ESmodules so it's completely tree-shakable. -Each icon can be imported as a preact component. - -### Example - -You can pass additional props to adjust the icon. - -```js -import { Camera } from 'lucide-preact'; -// Returns PreactComponent - -// Usage -const App = () => { - return ; -}; - -export default App; -``` - -### Props +## Documentation -| name | type | default | -| ------------- | -------- | ------------ | -| `size` | _Number_ | 24 | -| `color` | _String_ | currentColor | -| `strokeWidth` | _Number_ | 2 | +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-preact) -### Custom props / svg attributes +## Community -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 ; -}; -``` +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -> 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). +## License -### One generic icon component +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -It is possible to create one generic icon component to load icons. +## Sponsors -> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. + + Powered by Vercel + -#### Icon Component Example +DigitalOcean Referral Badge -```js -import * as icons from 'lucide-preact'; +### Awesome backer 🍺 -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 561b845447..4fed29661b 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 ; -}; - -export default App; -``` +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -### Props +## Sponsors -| name | type | default | -| ------------- | -------- | ------------ | -| `size` | _Number_ | 24 | -| `color` | _String_ | currentColor | -| `strokeWidth` | _Number_ | 2 | + + Powered by Vercel + -### Custom props - -You can also pass custom props that will be added in the svg as attributes. - -```js -const App = () => { - return ; -}; -``` +DigitalOcean Referral Badge -### Generic icon component +### Awesome backer 🍺 -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 beeb4b9c4e..2bb1c106c5 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 - -It's built with ES modules so it's completely tree-shakable. -Each icon can be imported as a react component. - -### Example - -You can pass additional props to adjust the icon. - -```js -import { Camera } from 'lucide-react'; - -const App = () => { - return ; -}; - -export default App; -``` - -### Props +## Documentation -| name | type | default | -| ------------- | -------- | ------------ | -| `size` | _Number_ | 24 | -| `color` | _String_ | currentColor | -| `strokeWidth` | _Number_ | 2 | +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-react) -### Custom props +## Community -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; -``` +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -#### With Dynamic Imports +## License -Lucide react exports a dynamic import map `dynamicIconImports`. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database. +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size. +## Sponsors -The keys of the dynamic import map are the lucide original icon names. + + Powered by Vercel + -Example with React suspense: +DigitalOcean Referral Badge -```tsx -import React, { lazy, Suspense } from 'react'; -import { LucideProps } from 'lucide-react'; -import dynamicIconImports from 'lucide-react/dynamicIconImports'; +### Awesome backer 🍺 -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 211c91ce19..8e6187ed7e 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 - -It's build with ESmodules so it's completely tree-shakable. -Each icon can be imported as a solid component. - -### Example - -You can pass additional props to adjust the icon. - -```js -import { Camera } from 'lucide-solid'; -// Returns SolidComponent - -// Usage -const App = () => { - return ; -}; - -export default App; -``` - -### Props +## Documentation -| name | type | default | -| ------------- | -------- | ------------ | -| `size` | _Number_ | 24 | -| `color` | _String_ | currentColor | -| `strokeWidth` | _Number_ | 2 | +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-solid) -### Custom props / svg attributes +## Community -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. +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -```js -// Usage -const App = () => { - return ; -}; -``` +## License -### One generic icon component +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -It is possible to create one generic icon component to load icons. +## Sponsors -> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. + + Powered by Vercel + -#### Icon Component Example +DigitalOcean Referral Badge -```tsx -import * as icons from 'lucide-solid'; -import type { LucideProps } from 'lucide-solid'; -import { splitProps } from 'solid-js'; -import { Dynamic } from 'solid-js/web'; +### Awesome backer 🍺 -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 93fa392c77..3011c7b05b 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 - -```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 +## Documentation -You may need additional loader for this. +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-static) -```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'); -``` +## Community -> 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}`); -}); -``` +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -## Contributing +## License -For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md). +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -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) +## Sponsors -## Community + + Powered by Vercel + -Join the community on our [Discord](https://discord.gg/EH6nSts) server! +DigitalOcean Referral Badge -## License +### Awesome backer 🍺 -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). +Scipress sponsor badge diff --git a/packages/lucide-svelte/README.md b/packages/lucide-svelte/README.md index d60241a719..43f6954335 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 - -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. +## Documentation -### Example +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-svelte) -Default usage: +## Community -```sv - +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. - -``` - -You can pass additional props to adjust the icon. +## License -```sv - +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). - -``` +## Sponsors -### Available props + + Powered by Vercel + -| 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 - - - -``` +DigitalOcean Referral Badge -This results a filled phone icon. +### Awesome backer 🍺 -### 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 565dc7c490..29cd486804 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 - -It's build with ESmodules so it's completely tree-shakable. -Each icon can be imported as a vue component. - -### Example - -You can pass additional props to adjust the icon. +## Documentation -```vue - +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-vue-next) - -``` - -### Props +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -| name | type | default | -| ----------------------- | --------- | ------------ | -| `size` | *number* | 24 | -| `color` | *string* | currentColor | -| `stroke-width` | *number* | 2 | -| `absolute-stroke-width` | *boolean* | false | -| `default-class` | *string* | lucide-icon | +## License -### Custom props +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -You can also pass custom props that will be added in the svg as attributes. - -```vue - -``` +## Sponsors -### One generic icon component + + Powered by Vercel + -It is possible to create one generic icon component to load icons. +DigitalOcean Referral Badge -> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. +### Awesome backer 🍺 -#### 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 b1007b0e5e..daa1df6110 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 - -It's build with ESmodules so it's completely tree-shakable. -Each icon can be imported as a vue component. +## Documentation -### Example +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-vue) -You can pass additional props to adjust the icon. +## Community -```vue - +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. - -``` +## License -### Props +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -| name | type | default | -| ----------------------- | --------- | ------------ | -| `size` | *number* | 24 | -| `color` | *string* | currentColor | -| `stroke-width` | *number* | 2 | -| `absolute-stroke-width` | *boolean* | false | -| `default-class` | *string* | lucide-icon | +## Sponsors -### Custom props - -You can also pass custom props that will be added in the svg as attributes. - -```vue - -``` + + Powered by Vercel + -### One generic icon component +DigitalOcean Referral Badge -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 - - - -``` +### Awesome backer 🍺 -##### 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 b75cd96374..ea5a29bb1b 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 - -### With unpkg - -Here is a complete example with unpkg - -```html - - - - - - - - - -``` - -### With ESModules - -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. - -```html - - -``` - -```js -import { createIcons, icons } from 'lucide'; - -// Caution, this will import all the icons and bundle them. -createIcons({ icons }); - -// 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: +## Documentation -```js -import { createIcons } from 'lucide'; +For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide) -createIcons({ - attrs: { - class: ['my-custom-class', 'icon'], - 'stroke-width': 1, - stroke: '#333' - }, - nameAttr: 'data-lucide' // attribute for the icon name. -}); -``` +## Community -#### Treeshake the library, only use the icons you use +Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users. -```js -import { createIcons, Menu, ArrowRight, Globe } from 'lucide'; +## License -createIcons({ - icons: { - Menu, - ArrowRight, - Globe - } -}); -``` +Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license). -#### Custom Element binding +## Sponsors -```js -import { createElement, Menu } from 'lucide'; + + Powered by Vercel + -const menuIcon = createElement(Menu); // Returns HTMLElement (svg) +DigitalOcean Referral Badge -// set custom attributes with browser native functions -menuIcon.setAttribute('stroke', '#333'); -menuIcon.classList.add('my-icon-class'); +### Awesome backer 🍺 -// 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 0000000000..51786ac75a --- /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 3eaa776579..da862f312d 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 0000000000..c01c3fcb8a --- /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 56e70c0cd2..92beb4610e 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 0000000000..dab688975d --- /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 3d2e93c336..dc4f49ce02 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 0000000000..6caba5acd3 --- /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 a86e398036..26ea9604b3 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": "",