diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 000000000..99c29036d --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,2 @@ +# These are supported funding model platforms +open_collective: lucide-icons diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 7b3094b80..eb5b73873 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -32,7 +32,7 @@ jobs: tr '\n' ' ' | # remove line breaks sed -e 's/]*>//g' | # remove attributes from svg element base64 -w 0 | # encode svg - sed "s|.*|\"$file\" |" + sed "s|.*|\"$file\" |" done | tr '\n' ' ' >> $GITHUB_OUTPUT echo >> $GITHUB_OUTPUT echo "$delimiter" >> $GITHUB_OUTPUT diff --git a/categories/coding.json b/categories/coding.json deleted file mode 100644 index 80f33d80e..000000000 --- a/categories/coding.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "$schema": "../category.schema.json", - "title": "Coding", - "icon": "code-2" -} \ No newline at end of file diff --git a/categories/development.json b/categories/development.json index bfe541ace..cfbe17591 100644 --- a/categories/development.json +++ b/categories/development.json @@ -1,5 +1,5 @@ { "$schema": "../category.schema.json", - "title": "Development", - "icon": "git-pull-request" -} \ No newline at end of file + "title": "Coding & development", + "icon": "code-2" +} diff --git a/docs/.vitepress/lib/SvgPreview/index.tsx b/docs/.vitepress/lib/SvgPreview/index.tsx index dcf321a73..13cb0fc06 100644 --- a/docs/.vitepress/lib/SvgPreview/index.tsx +++ b/docs/.vitepress/lib/SvgPreview/index.tsx @@ -173,53 +173,60 @@ const ControlPath = ({ ); }; -const SvgPreview = React.forwardRef( - ({ src, showGrid = false }, ref) => { - const paths = getPaths(src); - const darkModeCss = `@media screen and (prefers-color-scheme: dark) { +const SvgPreview = React.forwardRef< + SVGSVGElement, + { + src: string | ReturnType; + showGrid?: boolean; + } & React.SVGProps +>(({ src, children, showGrid = false, ...props }, ref) => { + const paths = typeof src === 'string' ? getPaths(src) : src; + + const darkModeCss = `@media screen and (prefers-color-scheme: dark) { .svg-preview-grid-group, .svg-preview-shadow-mask-group, .svg-preview-shadow-group { stroke: #fff; } }`; - return ( - - - {showGrid && } - - - - - ); - } -); + return ( + + + {showGrid && } + + + + {children} + + ); +}); export default SvgPreview; diff --git a/docs/.vitepress/lib/SvgPreview/utils.ts b/docs/.vitepress/lib/SvgPreview/utils.ts index 7772f8f30..03f767f84 100644 --- a/docs/.vitepress/lib/SvgPreview/utils.ts +++ b/docs/.vitepress/lib/SvgPreview/utils.ts @@ -28,7 +28,7 @@ export const getCommands = (src: string) => ); export const getPaths = (src: string) => { - const commands = getCommands(src); + const commands = getCommands(src.includes('${src}`); const paths: Path[] = []; let prev: Point | undefined = undefined; let start: Point | undefined = undefined; diff --git a/docs/guide/design/icon-design-guide.md b/docs/guide/design/icon-design-guide.md index 7522e6e0d..b2d68dc60 100644 --- a/docs/guide/design/icon-design-guide.md +++ b/docs/guide/design/icon-design-guide.md @@ -55,6 +55,8 @@ Here are rules that should be followed to keep quality and consistency when maki Before an icon is added to the library, we like to have readable and optimized svg code. +Never use [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents. + ### Global Attributes For each icon these attributes are applied, corresponding to the above rules. diff --git a/docs/guide/packages/lucide-angular.md b/docs/guide/packages/lucide-angular.md index dbddc1b87..547aa5354 100644 --- a/docs/guide/packages/lucide-angular.md +++ b/docs/guide/packages/lucide-angular.md @@ -1,154 +1,109 @@ # Lucide Angular -Implementation of the lucide icon library for angular applications. +Implementation of the lucide icon library for Angular applications. ## Installation -```sh +```bash yarn add lucide-angular ``` or -```sh +```bash npm install lucide-angular ``` ## How to use -There are three ways for use this library. +### Step 1: Import `LucideAngularModule` -### Method 1: createElement - -After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`. - -```html - -
-``` +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 -// app.component.ts - -import { Component, OnInit } from '@angular/core'; -import { createElement } from 'lucide-angular'; -import { Activity } from 'lucide-angular/icons'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent implements OnInit { - ngOnInit(): void { - const div = document.getElementById('lucide-icon'); - const elm = createElement(Activity); - elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ... - - if (div) { - div.appendChild(elm); - } - } -} -``` - -### 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 -// app.module.ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular'; +import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular'; @NgModule({ - declarations: [AppComponent], imports: [ - BrowserModule, - AppRoutingModule, - LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported. - ], - providers: [], - bootstrap: [AppComponent] + LucideAngularModule.pick({File, Home, Menu, UserCheck}) + ] }) -export class AppModule {} +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 - - - + + + + ``` -### Method 3: User **Tag** with **img** property +### Props -After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`. +You can pass additional props to adjust the icon appearance. -```js -// app.module.ts -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +| name | type | default | +| --------------------- | --------- | ------------ | +| `size` | *number* | 24 | +| `color` | *string* | currentColor | +| `strokeWidth` | *number* | 2 | +| `absoluteStrokeWidth` | *boolean* | false | -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { LucideAngularModule } from 'lucide-angular'; - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule {} +```html + ``` -```xml - - - -``` +### Global configuration -```js -// app.component.ts -import { Component } from '@angular/core'; -import { Airplay, Circle } from 'lucide-angular'; +You can inject the `LucideIconConfig` service in your root component to globally configure the default property values as defined above. -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - ico1 = Airplay; - ico2 = Circle; +### 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; } ``` -## Notes +## Injecting multiple icon providers -### Import all icons - -In `Method 2`: import all icons in `app.module.ts` by: +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) - ... + +LucideAngularModule.pick(icons) ``` - -### Tags - -You can use the following tags instead of `lucide-icon`: - -- lucide-angular -- i-lucide -- span-lucide - -All of the above are the same diff --git a/docs/guide/packages/lucide-preact.md b/docs/guide/packages/lucide-preact.md index d3a543b07..640c51fb5 100644 --- a/docs/guide/packages/lucide-preact.md +++ b/docs/guide/packages/lucide-preact.md @@ -41,11 +41,12 @@ 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 | +| `absoluteStrokeWidth` | *boolean* | false | ### Custom props / svg attributes diff --git a/docs/guide/packages/lucide-react-native.md b/docs/guide/packages/lucide-react-native.md index 9ccf3a08c..51253b294 100644 --- a/docs/guide/packages/lucide-react-native.md +++ b/docs/guide/packages/lucide-react-native.md @@ -39,11 +39,12 @@ 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 | +| `absoluteStrokeWidth` | *boolean* | false | ### Custom props diff --git a/docs/guide/packages/lucide-react.md b/docs/guide/packages/lucide-react.md index ee8783204..4c43f1bd6 100644 --- a/docs/guide/packages/lucide-react.md +++ b/docs/guide/packages/lucide-react.md @@ -37,11 +37,12 @@ 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 | +| `absoluteStrokeWidth` | *boolean* | false | ### Custom props diff --git a/docs/guide/packages/lucide-solid.md b/docs/guide/packages/lucide-solid.md new file mode 100644 index 000000000..aae311192 --- /dev/null +++ b/docs/guide/packages/lucide-solid.md @@ -0,0 +1,79 @@ +# Lucide Solid + +Implementation of the lucide icon library for solid applications. + +## Installation + +```sh +yarn add lucide-solid +``` + +or + +```sh +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 + +| name | type | default | +| --------------------- | --------- | ------------ | +| `size` | *number* | 24 | +| `color` | *string* | currentColor | +| `strokeWidth` | *number* | 2 | +| `absoluteStrokeWidth` | *boolean* | false | + +### 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 +// 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; +``` diff --git a/docs/guide/packages/lucide-static.md b/docs/guide/packages/lucide-static.md index a753b9147..802bd2c0d 100644 --- a/docs/guide/packages/lucide-static.md +++ b/docs/guide/packages/lucide-static.md @@ -2,16 +2,16 @@ This package include the following lucide implementations: -- All svg files -- Javascript library containing strings of svgs. +- All SVG files +- SVG sprite - Icon fonts -- Svg sprite +- JavaScript library containing strings of SVGs. ## Why lucide-static? -This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project. +This package is suitable for specific use cases, for example if you want to use icon fonts, SVG sprites, normal SVGs or Common.js SVG strings in your javascript project. -> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Treeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact) +> ⚠️ While they can be useful for prototyping, it is not recommended to use the SVG sprites or icon fonts provided by this package in production web apps as all the available icons are included in the app, hence increasing loading time and data usage. We recommend to use a bundler and treeshaking to make sure only the icons you use are bundled with your app. Threeshaking is only available in these packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact) ## Installation @@ -30,10 +30,10 @@ npm install lucide-static ### CDN ```html - + - +