hipowered.dev/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-11-14 13:58:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/lucide-icons/lucide into docs-vitepress

Browse Source
This commit is contained in:
Eric Fennis
2023-04-30 22:39:30 +02:00
parent d04c5931a3 890474889a
commit fe58bbde10
470 changed files with 5239 additions and 1539 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/lib/SvgPreview/index.tsx
+49 -42
View File
@@ -173,53 +173,60 @@ const ControlPath = ({
);
};
const SvgPreview = React.forwardRef<SVGSVGElement, { src: string; showGrid?: boolean }>(
({ 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<typeof getPaths>;
showGrid?: boolean;
} & React.SVGProps<SVGSVGElement>
>(({ 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 (
<svg
ref={ref}
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<style>{darkModeCss}</style>
{showGrid && <Grid strokeWidth={0.1} stroke="#777" strokeOpacity={0.3} radius={1} />}
<Shadow paths={paths} strokeWidth={4} stroke="#777" radius={1} strokeOpacity={0.15} />
<ColoredPath
paths={paths}
colors={[
'#1982c4',
'#4267AC',
'#6a4c93',
'#B55379',
'#FF595E',
'#FF7655',
'#ff924c',
'#FFAE43',
'#ffca3a',
'#C5CA30',
'#8ac926',
'#52A675',
]}
/>
<ControlPath radius={1} paths={paths} pointSize={1} stroke="#fff" strokeWidth={0.125} />
</svg>
);
}
);
return (
<svg
ref={ref}
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<style>{darkModeCss}</style>
{showGrid && <Grid strokeWidth={0.1} stroke="#777" strokeOpacity={0.3} radius={1} />}
<Shadow paths={paths} strokeWidth={4} stroke="#777" radius={1} strokeOpacity={0.15} />
<ColoredPath
paths={paths}
colors={[
'#1982c4',
'#4267AC',
'#6a4c93',
'#B55379',
'#FF595E',
'#FF7655',
'#ff924c',
'#FFAE43',
'#ffca3a',
'#C5CA30',
'#8ac926',
'#52A675',
]}
/>
<ControlPath radius={1} paths={paths} pointSize={1} stroke="#fff" strokeWidth={0.125} />
{children}
</svg>
);
});
export default SvgPreview;
docs/.vitepress/lib/SvgPreview/utils.ts
+1 -1
View File
@@ -28,7 +28,7 @@ export const getCommands = (src: string) =>
);
export const getPaths = (src: string) => {
const commands = getCommands(src);
const commands = getCommands(src.includes('<svg') ? src : `<svg>${src}</svg>`);
const paths: Path[] = [];
let prev: Point | undefined = undefined;
let start: Point | undefined = undefined;
docs/guide/design/icon-design-guide.md
+2
View File
@@ -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 [`<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.
docs/guide/packages/lucide-angular.md
+64 -109
View File
@@ -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
<!-- app.component.html -->
<div id="lucide-icon"></div>
```
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
<!-- app.component.html -->
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
<lucide-icon name="edit" class="myicon"></lucide-icon>
<lucide-angular name="file" class="my-icon"></lucide-angular>
<lucide-icon name="home" class="my-icon"></lucide-icon>
<i-lucide name="menu" class="my-icon"></i-lucide>
<span-lucide name="user-check" class="my-icon"></span-lucide>
```
### 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
<i-lucide name="home" [size]="48" color="red" [strokeWidth]="1"></i-lucide>
```
```xml
<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
```
### 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
docs/guide/packages/lucide-preact.md
+6 -5
View File
@@ -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
docs/guide/packages/lucide-react-native.md
+6 -5
View File
@@ -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
docs/guide/packages/lucide-react.md
+6 -5
View File
@@ -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
docs/guide/packages/lucide-solid.md
+79
View File
@@ -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 <Camera color="red" size={48} />;
};
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 <Camera fill="red" stroke-linejoin="bevel" />;
};
```
### 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 <Dynamic component={icons[local.name]} {...others} />
};
export default Icon;
```
docs/guide/packages/lucide-static.md
+15 -15
View File
@@ -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
<!-- Svg File -->
<!-- SVG file for a single icon -->
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
<!-- Icon Font -->
<!-- Icon font -->
<style>
@font-face {
font-family: 'LucideIcons';
@@ -44,16 +44,16 @@ npm install lucide-static
## Usage
Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).
Check out the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).
### SVG Files
#### Svg file as image
#### SVG file as image
To use it in for example html:
```html
<!-- Svg File -->
<!-- SVG file for a single icon -->
<img src="~lucide-static/icons/home.svg" />
```
@@ -65,15 +65,15 @@ To use it in for example html:
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
#### SVG file as string
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/).
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
// return string of an SVG
```
### SVG Sprite
@@ -116,7 +116,7 @@ If you'd prefer, you can use CSS to hold your base SVG properties
}
```
and update the svg as follows
and update the SVG as follows
```svg
<svg
docs/guide/packages/lucide-svelte.md
+8 -6
View File
@@ -42,12 +42,14 @@ You can pass additional props to adjust the icon.
### Available props
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `*<SVGProps>` | _String_ | - |
| name | type | default |
| --------------------- | --------- | ------------ |
| `size` | *number* | 24 |
| `color` | *string* | currentColor |
| `strokeWidth` | *number* | 2 |
| `absoluteStrokeWidth` | *boolean* | false |
| `*<SVGProps>` | *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)
docs/guide/packages/lucide-vue-next.md
+13 -7
View File
@@ -42,12 +42,13 @@ import { Camera } from 'lucide-vue-next';
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `stroke-width`| *Number* | 2
| `default-class`| *String* | lucide-icon
| name | type | default |
| ----------------------- | --------- | ------------ |
| `size` | *number* | 24 |
| `color` | *string* | currentColor |
| `stroke-width` | *number* | 2 |
| `absolute-stroke-width` | *boolean* | false |
| `default-class` | *string* | lucide-icon |
### Custom props
@@ -69,7 +70,12 @@ It is possible to create one generic icon component to load icons.
``` html
<template>
<component :is="icon" :size="size" :color="color" :stroke-width="strokeWidth" :default-class="defaultClass" />
<component
:is="icon"
:size="size"
:color="color"
:stroke-width="strokeWidth" :default-class="defaultClass"
/>
</template>
<script setup>
docs/guide/packages/lucide-vue.md
+7 -6
View File
@@ -43,12 +43,13 @@ You can pass additional props to adjust the icon.
### 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 |
| `stroke-width` | *number* | 2 |
| `absolute-stroke-width` | *boolean* | false |
| `default-class` | *string* | lucide-icon |
### Custom props