Compare commits

...

24 Commits

Author SHA1 Message Date
Karsa
3529cd3f4d Adds various food and food intolerance icons (#861)
* Food intolerance + allergy icons

* Fixes bean outline

* Update dna.svg

* Update bean.svg

Co-authored-by: Karsa <karsa@karsa.org>
2022-11-02 16:09:23 +01:00
locness3
a4d568f26e Improve "Why choose Lucide over Feather" section in README.md (#868)
Authored by: @locness3
- Updated the obsolete number of added icons (congratulations to everyone btw, this is impressive).
- Added mention official packages.
- Expanded on "Active community".
2022-11-02 16:01:54 +01:00
Eric Fennis
9e524fd557 Add icon check-check (#809)
* add icon check check

* Update icons/check-check.svg

Co-authored-by: Karsa <contact@karsa.org>

Co-authored-by: Karsa <contact@karsa.org>
2022-11-01 17:30:41 +01:00
Wojciech Maj
b5c71c4fc3 Dedupe dependencies (#854) 2022-11-01 17:28:24 +01:00
Sean van Zuidam
aa8861a2cd Add show more link for packages on Homepage (#858)
* DEL: laravel from homepage packages

* ADD: more options link

This makes it more clear there are more options than just the ones shown on the homepage
2022-11-01 17:25:14 +01:00
Wojciech Maj
a41918a81e Don't hardcode GitHub username in fetchCommitsOfIcon, allow usage of GITHUB_TOKEN instead (#844)
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2022-10-27 08:22:53 +02:00
Wojciech Maj
33be2c2430 Split commands in documentation to make it possible to use Copy to clipboard icon (#853)
GitHub adds Copy to clipboard button to all code snippets. By splitting npm and yarn specific snippets into two separate snippets we make it possible to copy the command dev is interested in in one click instead of manually selecting it and copying with Ctrl+C.
2022-10-27 08:19:45 +02:00
Wojciech Maj
eb706417e6 Reduce __NEXT_DATA__ size by removing content and author.commit properties from IconEntity (#846)
Reduces __NEXT_DATA__ size on main page by 127610 bytes by calculating `content` from `src` property and removing `commit` data altogether.

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2022-10-27 08:17:25 +02:00
Wojciech Maj
01e11a61f8 Update GitHub Actions actions/checkout to v3 (#851)
Fixed dependency warning:

```
Node.js 12 actions are deprecated. For more information see: https://github.blog/changelog/2022-09-22-github-actions-all-actions-will-begin-running-on-node16-instead-of-node12/. Please update the following actions to use Node.js 16: actions/checkout
```
2022-10-27 08:15:43 +02:00
Kemie
b323bbd28e Add Cat & Dog (#825)
* Added cat & dog

* optimized svgs, tags

* updated cat & dog

refined icons to better meet design guidelines (2px gap)

* Update dog.svg

fixed ears

* Update tags.json

tags for dog

Co-authored-by: Karsa <contact@karsa.org>

* Update tags.json

tags for cat

Co-authored-by: Karsa <contact@karsa.org>

* reoptimized dog & cat svgs

* reoptimized svgs

* svg code formatting

* unmerge paths

* Update icons/cat.svg

* Update icons/dog.svg

Co-authored-by: Karsa <contact@karsa.org>
2022-10-27 08:13:26 +02:00
Wojciech Maj
514e88bbf9 Remove direct dependency on @emotion/core, @emotion/react, @emotion/styled (#849) 2022-10-27 08:11:57 +02:00
Sean van Zuidam
de6ed26152 ADD: missing key to loops (#856) 2022-10-27 08:11:05 +02:00
Wojciech Maj
b8cc9ea3c8 Update husky, automatically install husky on pnpm i (#847)
Fixes #836

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2022-10-26 08:50:19 +02:00
Wojciech Maj
cc2ac8bfcd Lazy load JSZip on Download all button click (#850) 2022-10-26 08:46:19 +02:00
Wojciech Maj
0e340a2679 Add lucide-react-native package to Header and main menu items (#845)
Fixes #841
2022-10-26 08:41:05 +02:00
Wojciech Maj
c15e3914a6 Fix version not bumped in lucide-react-native package.json (#840)
Fixes #839

…i think.
2022-10-26 08:36:57 +02:00
Wojciech Maj
ff81fbfd9a Don't use md4 in crypto.createHash (#843)
Fixes #842

Please review carefully - I don't fully understand how this hash is used and whether there are any implications of changing it.
2022-10-26 08:36:17 +02:00
Wojciech Maj
5317abb867 Add packageManager to package.json to allow usage with Corepack (#838) 2022-10-26 08:33:51 +02:00
Wojciech Maj
ac80b9e58f Update react-native-svg to ^13.0.0, allow react-native-svg ^13.0.0 as peerDependency (#837) 2022-10-26 08:33:17 +02:00
Eric Fennis
a25f139953 add spline icon (#811) 2022-10-24 18:54:16 +02:00
Ekow Baah-Nyarkoh
b457c8dea1 Make lucid-angular compatible with angular 14 (#835)
* make lucid angular compatible with angular 14

* update pnpm-lock file
2022-10-24 18:39:44 +02:00
Christian Friedow
2e24567f8e Docs: fix and extend the generic vue3 icon component example (#832)
* docs: fix and extend the vue3 icon component example

* docs: refactor the usage example to utilize script setup

* fix: correct dashcase in property names
2022-10-23 18:30:39 +02:00
ANTARCTUS
9b90bc4d51 Better tags 1 (#827)
* Update tags.json

Add "logo" tag to the trello logo

* Update tags.json

Add "maths" tag

* Update tags.json

Add tag "logo" to  chrome

* Update tags.json

Add the tag "shape" to "octogon", "triangle", "square" and "circle"

* Update tags.json

Add tag "shape" to diamond

* Update tags.json

Add tag "maths" to function

* Update tags.json

* Update tags.json

Add "maths" to "circle slashed"

* Update tags.json

Remove the comma after the tag logo from trello
2022-10-23 18:29:43 +02:00
Lucide Bot
6fd0380e19 📦 Bump lucide package versions to 0.93.0 2022-10-23 12:19:23 +00:00
83 changed files with 4029 additions and 6168 deletions

View File

@@ -14,8 +14,8 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16

View File

@@ -12,8 +12,8 @@ jobs:
lucide-angular:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-angular test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-preact:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-preact test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-react-native:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-react-native test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-react:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-react test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-solid:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-solid test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-static:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -42,4 +42,3 @@ jobs:
- name: Build
run: pnpm --filter lucide-static build

View File

@@ -12,8 +12,8 @@ jobs:
lucide-svelte:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-svelte test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-vue-next:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-vue-next test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-vue:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-vue test

View File

@@ -12,8 +12,8 @@ jobs:
lucide:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide test

View File

@@ -3,7 +3,7 @@ name: Release Packages
on:
push:
tags:
- "v*"
- 'v*'
workflow_dispatch:
inputs:
@@ -32,8 +32,8 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -86,9 +86,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -141,9 +141,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -196,9 +196,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -251,9 +251,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -306,9 +306,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -361,9 +361,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -416,9 +416,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -471,9 +471,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -526,10 +526,10 @@ jobs:
runs-on: ubuntu-latest
needs: [pre-build, lucide-font]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -582,8 +582,8 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -639,7 +639,7 @@ jobs:
mkdir lucide-font
pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
- name: "Upload to Artifacts"
- name: 'Upload to Artifacts'
uses: actions/upload-artifact@v1
with:
name: lucide-font
@@ -652,7 +652,7 @@ jobs:
container:
image: cirrusci/flutter:latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- uses: actions/cache@v2
with:
@@ -735,13 +735,14 @@ jobs:
]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- name: Commit package files
run: |
mv lucide-package-json/package.json packages/lucide/package.json
mv lucide-react-package-json/package.json packages/lucide-react/package.json
mv lucide-react-native-package-json/package.json packages/lucide-react-native/package.json
mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
mv lucide-svelte-package-json/package.json packages/lucide-svelte/package.json

View File

@@ -17,9 +17,10 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
### Why choose Lucide over Feather Icons
- Lucide already expanded the icon set by 130+ in less than a year, so more icons to work with.
- More icons to work with: Lucide already has hundreds of icons more than Feather does.
- Official librairies and integrations with popular frameworks and design tools.
- Well maintained code base.
- Active community.
- Active community, regularly growing and improving the set.
## Table of Contents
@@ -56,9 +57,11 @@ Implementation of the lucide icon library for web applications.
```sh
npm install lucide
```
#or
or
```sh
yarn add lucide
```
@@ -70,9 +73,11 @@ Implementation of the lucide icon library for react applications.
```sh
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -84,9 +89,11 @@ Implementation of the lucide icon library for React Native applications.
```sh
yarn add lucide-react-native
```
# or
or
```sh
npm install lucide-react-native
```
@@ -98,9 +105,11 @@ Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
@@ -112,9 +121,11 @@ Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue-next
```
# or
or
```sh
npm install lucide-vue-next
```
@@ -124,9 +135,11 @@ For more details, see the [documentation](https://github.com/lucide-icons/lucide
```sh
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -138,9 +151,11 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
@@ -157,9 +172,11 @@ NPM package
```sh
yarn add lucide-static
```
# or
or
```sh
npm install lucide-static
```
@@ -197,9 +214,11 @@ Implementation of the lucide icon library for Svelte applications.
```sh
yarn add lucide-svelte
```
# or
or
```sh
npm install lucide-svelte
```
@@ -211,9 +230,11 @@ Implementation of the lucide icon library for solid applications.
```sh
yarn add lucide-solid
```
#or
or
```sh
npm install lucide-solid
```
@@ -245,4 +266,3 @@ Thank you to all the people who contributed to Lucide!
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
<img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
</a>

View File

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for web applications.
```bash
npm install lucide
```
#or
or
```sh
yarn add lucide
```
@@ -24,9 +26,11 @@ Implementation of the lucide icon library for react applications.
```bash
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -38,9 +42,11 @@ Implementation of the lucide icon library for vue applications.
```bash
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
@@ -52,9 +58,11 @@ Implementation of the lucide icon library for vue applications.
```bash
yarn add lucide-vue-next
```
# or
or
```sh
npm install lucide-vue-next
```
@@ -66,9 +74,11 @@ Implementation of the lucide icon library for vue applications.
```bash
yarn add lucide-svelte
```
# or
or
```sh
npm install lucide-svelte
```
@@ -78,9 +88,11 @@ For more details, see the [documentation](packages/lucide-svelte).
```bash
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -92,9 +104,11 @@ Implementation of the lucide icon library for preact applications.
```bash
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
@@ -106,7 +120,7 @@ The lucide figma plugin.
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover")
![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail 'Figma Lucide Cover')
## Laravel

View File

@@ -6,9 +6,11 @@ Implementation of the lucide icon library for angular applications.
```sh
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -37,7 +39,6 @@ import { Activity } from 'lucide-angular/icons';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
const div = document.getElementById('lucide-icon');
@@ -51,7 +52,7 @@ export class AppComponent implements OnInit {
}
```
### Method 2: User __Tag__ with __name__ property
### Method 2: User **Tag** with **name** property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
@@ -65,9 +66,7 @@ import { AppComponent } from './app.component';
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
@@ -76,7 +75,6 @@ import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
@@ -86,7 +84,7 @@ export class AppModule { }
<lucide-icon name="edit" class="myicon"></lucide-icon>
```
### Method 3: User __Tag__ with __img__ property
### Method 3: User **Tag** with **img** property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
@@ -100,18 +98,11 @@ import { AppComponent } from './app.component';
import { LucideAngularModule } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ })
],
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
@@ -131,7 +122,6 @@ import { Airplay, Circle } from 'lucide-angular';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ico1 = Airplay;
ico2 = Circle;

View File

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
@@ -31,7 +33,7 @@ import { Camera } from 'lucide-preact';
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -39,11 +41,11 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props / svg attributes
@@ -52,7 +54,7 @@ You can also pass custom props that will be added in the as attributes. With tha
```js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel"/>
return <Camera fill="red" stroke-linejoin="bevel" />;
};
```
@@ -72,7 +74,7 @@ import * as icons from 'lucide-preact';
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -8,9 +8,11 @@ First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install
```bash
yarn add lucide-react-native
```
# or
or
```sh
npm install lucide-react-native
```

View File

@@ -6,9 +6,11 @@ Implementation of the lucide icon library for react applications
```bash
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -27,7 +29,7 @@ import { Camera } from 'lucide-react';
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -35,11 +37,11 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props
@@ -48,7 +50,7 @@ You can also pass custom props that will be added in the svg as attributes.
```js
// Usage
const App = () => {
return <Camera fill="red"/>
return <Camera fill="red" />;
};
```
@@ -66,7 +68,7 @@ import * as icons from 'lucide-react';
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -19,9 +19,11 @@ This package is suitable for very specific use cases for example if you want to
```sh
yarn add lucide-static
```
# or
or
```sh
npm install lucide-static
```
@@ -29,13 +31,13 @@ npm install lucide-static
```html
<!-- Svg File -->
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
<!-- Icon Font -->
<style>
@font-face {
font-family: "LucideIcons";
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
font-family: 'LucideIcons';
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
}
</style>
```
@@ -52,12 +54,12 @@ To use it in for example html:
```html
<!-- Svg File -->
<img src="~lucide-static/icons/home.svg">
<img src="~lucide-static/icons/home.svg" />
```
```css
.home-icon {
background-image: url(~lucide-static/icons/home.svg)
background-image: url(~lucide-static/icons/home.svg);
}
```
@@ -69,7 +71,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
```js
import arrowRightIcon from 'lucide-static/icons/arrow-right'
import arrowRightIcon from 'lucide-static/icons/arrow-right';
// return string of a svg
```
@@ -80,7 +82,7 @@ You may need additional loader for this.
```html
<!-- Icon Sprite, not recommended for production! -->
<img src="lucide-static/sprite.svg#home">
<img src="lucide-static/sprite.svg#home" />
<!-- or -->
<svg
@@ -133,20 +135,19 @@ and update the svg as follows
### Icon Font
```css
@import("~lucide-static/font/Lucide.css")
@import ('~lucide-static/font/Lucide.css');
```
```html
<div class="icon-home"></div>
```
### Node.js
To use lucide icons in your Nodejs project you can import each icon as:
```js
const { messageSquare } = require('lucide-static/lib')
const { messageSquare } = require('lucide-static/lib');
```
> Note: Each icon name is in camelCase.
@@ -154,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
#### Example in node.js project
```js
const express = require('express')
const { messageSquare } = require('lucide-static/lib')
const app = express()
const port = 3000
const express = require('express');
const { messageSquare } = require('lucide-static/lib');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send(`
@@ -172,10 +173,10 @@ app.get('/', (req, res) => {
</body>
</html>
`)
})
`);
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
console.log(`Example app listening at http://localhost:${port}`);
});
```

View File

@@ -6,9 +6,11 @@ Implementation of the lucide icon library for svelte applications.
```bash
yarn add lucide-svelte
```
# or
or
```sh
npm install lucide-svelte
```
@@ -22,7 +24,7 @@ Default usage:
```html
<script>
import { Skull } from 'lucide-svelte'
import { Skull } from 'lucide-svelte';
</script>
<Skull />
@@ -32,7 +34,7 @@ You can pass additional props to adjust the icon.
```html
<script>
import { Camera } from 'lucide-svelte'
import { Camera } from 'lucide-svelte';
</script>
<Camera color="#ff3e98" />
@@ -40,12 +42,12 @@ import { Camera } from 'lucide-svelte'
### 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 |
| `*<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)
@@ -53,7 +55,7 @@ import { Camera } from 'lucide-svelte'
```html
<script>
import { Phone } from 'lucide-svelte'
import { Phone } from 'lucide-svelte';
</script>
<Phone fill="#333" />
@@ -71,18 +73,18 @@ It is possible to create one generic icon component to load icons.
```html
<script>
import * as icons from "lucide-svelte";
import * as icons from 'lucide-svelte';
export let name;
</script>
<svelte:component this={icons[name]} {...$$props}/>
<svelte:component this="{icons[name]}" {...$$props} />
```
##### Then you can use it like this
```html
<script>
import LucideIcon from "./LucideIcon";
import LucideIcon from './LucideIcon';
</script>
<LucideIcon name="Menu" />

View File

@@ -35,15 +35,8 @@ You can pass additional props to adjust the icon.
/>
</template>
<script>
// Returns Vue component
<script setup>
import { Camera } from 'lucide-vue-next';
export default {
name: "My Component",
components: { Camera }
}
</script>
```
@@ -53,8 +46,8 @@ export default {
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
| `stroke-width`| *Number* | 2
| `default-class`| *String* | lucide-icon
### Custom props
@@ -76,25 +69,25 @@ It is possible to create one generic icon component to load icons.
``` html
<template>
<component :is="icon" />
<component :is="icon" :size="size" :color="color" :stroke-width="strokeWidth" :default-class="defaultClass" />
</template>
<script>
<script setup>
import { computed } from 'vue';
import * as icons from "lucide-vue-next";
export default {
props: {
const props = defineProps({
name: {
type: String,
required: true,
required: true
},
},
setup(props) {
const icon = computed(() => icons[props.name])
size: Number,
color: String,
strokeWidth: Number,
defaultClass: String
})
return { icon }
}
};
const icon = computed(() => icons[props.name]);
</script>
```
@@ -107,3 +100,4 @@ export default {
</div>
</template>
```
All other props listed above also work on the `Icon` Component.

View File

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for Vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
@@ -25,10 +27,7 @@ You can pass additional props to adjust the icon.
```html
<template>
<Camera
color="red"
:size="32"
/>
<Camera color="red" :size="32" />
</template>
<script>
@@ -36,21 +35,20 @@ You can pass additional props to adjust the icon.
import { Camera } from 'lucide-vue';
export default {
name: "My Component",
name: 'My Component',
components: { Camera }
}
};
</script>
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
| name | type | default |
| -------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `defaultClass` | _String_ | lucide-icon |
### Custom props
@@ -76,20 +74,20 @@ It is possible to create one generic icon component to load icons.
</template>
<script>
import * as icons from "lucide-vue";
import * as icons from 'lucide-vue';
export default {
props: {
name: {
type: String,
required: true,
},
required: true
}
},
computed: {
icon() {
return icons[this.name];
},
},
}
}
};
</script>
```

View File

@@ -6,9 +6,13 @@ Implementation of the lucide icon library for web applications.
### Package Managers
``` bash
```sh
npm install lucide
#or
```
or
```sh
yarn add lucide
```
@@ -65,8 +69,8 @@ createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
Globe
}
});
```
@@ -83,9 +87,9 @@ createIcons({
attrs: {
class: ['my-custom-class', 'icon'],
'stroke-width': 1,
stroke: '#333',
stroke: '#333'
},
nameAttr: 'icon-name', // attribute for the icon name.
nameAttr: 'icon-name' // attribute for the icon name.
});
```
@@ -98,8 +102,8 @@ createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
Globe
}
});
```

16
icons/bean-off.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22a13.96 13.96 0 0 0 9.9-4.1" />
<path d="M10.75 5.093A6 6 0 0 1 22 8c0 2.411-.61 4.68-1.683 6.66" />
<path d="M5.341 10.62a4 4 0 0 0 6.487 1.208M10.62 5.341a4.015 4.015 0 0 1 2.039 2.04" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 502 B

14
icons/bean.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.165 6.598C9.954 7.478 9.64 8.36 9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22c7.732 0 14-6.268 14-14a6 6 0 0 0-11.835-1.402Z" />
<path d="M5.341 10.62A4 4 0 1 0 10.62 5.34" />
</svg>

After

Width:  |  Height:  |  Size: 404 B

20
icons/candy-off.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m8.5 8.5-1 1a4.95 4.95 0 0 0 7 7l1-1" />
<path d="M11.843 6.187A4.947 4.947 0 0 1 16.5 7.5a4.947 4.947 0 0 1 1.313 4.657" />
<path d="M14 16.5V14" />
<path d="M14 6.5v1.843" />
<path d="M10 10v7.5" />
<path d="m16 7 1-5 1.367.683A3 3 0 0 0 19.708 3H21v1.292a3 3 0 0 0 .317 1.341L22 7l-5 1" />
<path d="m8 17-1 5-1.367-.683A3 3 0 0 0 4.292 21H3v-1.292a3 3 0 0 0-.317-1.341L2 17l5-1" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 657 B

17
icons/candy.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9.5 7.5-2 2a4.95 4.95 0 1 0 7 7l2-2a4.95 4.95 0 1 0-7-7Z" />
<path d="M14 6.5v10" />
<path d="M10 7.5v10" />
<path d="m16 7 1-5 1.37.68A3 3 0 0 0 19.7 3H21v1.3c0 .46.1.92.32 1.33L22 7l-5 1" />
<path d="m8 17-1 5-1.37-.68A3 3 0 0 0 4.3 21H3v-1.3a3 3 0 0 0-.32-1.33L2 17l5-1" />
</svg>

After

Width:  |  Height:  |  Size: 505 B

18
icons/cat.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M14 5.256A8.148 8.148 0 0 0 12 5a9.04 9.04 0 0 0-2 .227M20.098 10c.572 1.068.902 2.24.902 3.444C21 17.89 16.97 21 12 21s-9-3-9-7.556c0-1.251.288-2.41.792-3.444"/>
<path d="M3.75 10S2.11 3.58 3.5 3C4.89 2.42 8 3 9.781 5"/>
<path d="M20.172 10.002s1.64-6.42.25-7c-1.39-.58-4.5 0-6.282 2"/>
<path d="M8 14v.5"/>
<path d="M16 14v.5"/>
<path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/>
</svg>

After

Width:  |  Height:  |  Size: 605 B

14
icons/check-check.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 7 17l-5-5" />
<path d="m22 10-7.5 7.5L13 16" />
</svg>

After

Width:  |  Height:  |  Size: 275 B

23
icons/dna-off.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 2c-1.35 1.5-2.092 3-2.5 4.5M9 22c1.35-1.5 2.092-3 2.5-4.5" />
<path d="M2 15c3.333-3 6.667-3 10-3m10-3c-1.5 1.35-3 2.092-4.5 2.5" />
<path d="m17 6-2.5-2.5" />
<path d="m14 8-1.5-1.5" />
<path d="m7 18 2.5 2.5" />
<path d="m3.5 14.5.5.5" />
<path d="m20 9 .5.5" />
<path d="m6.5 12.5 1 1" />
<path d="m16.5 10.5 1 1" />
<path d="m10 16 1.5 1.5" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 630 B

23
icons/dna.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 15c6.667-6 13.333 0 20-6" />
<path d="M9 22c1.798-1.998 2.518-3.995 2.807-5.993" />
<path d="M15 2c-1.798 1.998-2.518 3.995-2.807 5.993" />
<path d="m17 6-2.5-2.5" />
<path d="m14 8-1-1" />
<path d="m7 18 2.5 2.5" />
<path d="m3.5 14.5.5.5" />
<path d="m20 9 .5.5" />
<path d="m6.5 12.5 1 1" />
<path d="m16.5 10.5 1 1" />
<path d="m10 16 1.5 1.5" />
</svg>

After

Width:  |  Height:  |  Size: 593 B

18
icons/dog.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 5.172C10 3.782 8.423 2.679 6.5 3c-2.823.47-4.113 6.006-4 7 .08.703 1.725 1.722 3.656 1 1.261-.472 1.96-1.45 2.344-2.5"/>
<path d="M14.267 5.172c0-1.39 1.577-2.493 3.5-2.172 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5"/>
<path d="M8 14v.5"/>
<path d="M16 14v.5"/>
<path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/>
<path d="M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444c0-1.061-.162-2.2-.493-3.309m-9.243-6.082A8.801 8.801 0 0 1 12 5c.78 0 1.5.108 2.161.306"/>
</svg>

After

Width:  |  Height:  |  Size: 764 B

15
icons/egg-off.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6.399 6.399C5.362 8.157 4.65 10.189 4.5 12c-.37 4.43 1.27 9.95 7.5 10 3.256-.026 5.259-1.547 6.375-3.625" />
<path d="M19.532 13.875A14.07 14.07 0 0 0 19.5 12c-.36-4.34-3.95-9.96-7.5-10-1.04.012-2.082.502-3.046 1.297" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 484 B

View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 10 4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-1.272-2.542" />
<path d="M10 2v2.343" />
<path d="M14 2v6.343" />
<path d="M8.5 2h7" />
<path d="M7 16h9" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 438 B

View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 2v8L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45L14 10V2" />
<path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" />
<path d="M8.5 2h7" />
<path d="M7 16h10" />
</svg>

Before

Width:  |  Height:  |  Size: 340 B

After

Width:  |  Height:  |  Size: 390 B

20
icons/hop-off.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17.5 5.5C19 7 20.5 9 21 11c-1.323.265-2.646.39-4.118.226" />
<path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
<path d="M17.5 17.5c-2.5 0-4 0-6-1" />
<path d="M20 11.5c1 1.5 2 3.5 2 4.5" />
<path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
<path d="M22 22c-2 0-3.5-.5-5.5-1.5" />
<path d="M4.783 4.782C1.073 8.492 1 14.5 5 18c1-1 2-4.5 1.5-6.5 1.5 1 4 1 5.5.5M8.227 2.57C11.578 1.335 15.453 2.089 18 5c-.88.88-3.7 1.761-5.726 1.618" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 725 B

20
icons/hop.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17.5 5.5C19 7 20.5 9 21 11c-2.5.5-5 .5-8.5-1" />
<path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
<path d="M16.5 11.5c1 2 1 3.5 1 6-2.5 0-4 0-6-1" />
<path d="M20 11.5c1 1.5 2 3.5 2 4.5-1.5.5-3 0-4.5-.5" />
<path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
<path d="M20.5 16.5c1 2 1.5 3.5 1.5 5.5-2 0-3.5-.5-5.5-1.5" />
<path d="M4.783 4.782C8.493 1.072 14.5 1 18 5c-1 1-4.5 2-6.5 1.5 1 1.5 1 4 .5 5.5-1.5.5-4 .5-5.5-.5C7 13.5 6 17 5 18c-4-3.5-3.927-9.508-.217-13.218Z" />
<path d="M4.5 4.5 3 3c-.184-.185-.184-.816 0-1" />
</svg>

After

Width:  |  Height:  |  Size: 775 B

16
icons/milk-off.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M8 2h8" />
<path d="M9 2v1.343M15 2v2.789a4 4 0 0 0 .672 2.219l.656.984a4 4 0 0 1 .672 2.22v1.131M7.8 7.8l-.128.192A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3" />
<path d="M7 15a6.47 6.47 0 0 1 5 0 6.472 6.472 0 0 0 3.435.435" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 506 B

15
icons/milk.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M8 2h8" />
<path d="M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2" />
<path d="M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0" />
</svg>

After

Width:  |  Height:  |  Size: 462 B

17
icons/nut-off.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 4V2" />
<path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592a7.01 7.01 0 0 0 4.125-2.939" />
<path d="M19 10v3.343" />
<path d="M12 12c-1.349-.573-1.905-1.005-2.5-2-.546.902-1.048 1.353-2.5 2-1.018-.644-1.46-1.08-2-2-1.028.71-1.69.918-3 1 1.081-1.048 1.757-2.03 2-3 .194-.776.84-1.551 1.79-2.21m11.654 5.997c.887-.457 1.28-.891 1.556-1.787 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4-.74 0-1.461.068-2.15.192" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 767 B

15
icons/nut.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 4V2" />
<path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592A7.003 7.003 0 0 0 19 14v-4" />
<path d="M12 4C8 4 4.5 6 4 8c-.243.97-.919 1.952-2 3 1.31-.082 1.972-.29 3-1 .54.92.982 1.356 2 2 1.452-.647 1.954-1.098 2.5-2 .595.995 1.151 1.427 2.5 2 1.31-.621 1.862-1.058 2.5-2 .629.977 1.162 1.423 2.5 2 1.209-.548 1.68-.967 2-2 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4Z" />
</svg>

After

Width:  |  Height:  |  Size: 686 B

15
icons/spline.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 6V4c0-.6-.4-1-1-1h-2a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1Z" />
<path d="M7 20v-2c0-.6-.4-1-1-1H4a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1Z" />
<path d="M5 17A12 12 0 0 1 17 5" />
</svg>

After

Width:  |  Height:  |  Size: 418 B

15
icons/vegan.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 2c4.056 3.007 9.232 9.337 10 20 .897-6.818 1.5-9.5 4-14" />
<path d="M20.375 6.533A9.953 9.953 0 0 1 22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2c2.003 0 3.869.589 5.433 1.603" />
<path d="M17.104 4c-1.002 1.274-1.146 2.586-1.1 4 1.9-.1 3.003-.201 4.3-1.4 1.406-1.3 1.6-2.3 1.7-4.6-2.7.1-3.623.375-4.9 2Z" />
</svg>

After

Width:  |  Height:  |  Size: 546 B

22
icons/wheat-off.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m2 22 10-10" />
<path d="m16 8-1.17 1.17" />
<path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
<path d="m8 8-.53.53a3.5 3.5 0 0 0 0 4.94L9 15l1.53-1.53c.55-.55.88-1.25.98-1.97" />
<path d="M10.91 5.26c.15-.26.34-.51.56-.73L13 3l1.53 1.53a3.5 3.5 0 0 1 .28 4.62" />
<path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
<path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
<path d="m16 16-.53.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.49 3.49 0 0 1 1.97-.98" />
<path d="M18.74 13.09c.26-.15.51-.34.73-.56L21 11l-1.53-1.53a3.5 3.5 0 0 0-4.62-.28" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 924 B

20
icons/wheat.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 22 16 8" />
<path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
<path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
<path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
<path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
<path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
<path d="M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
<path d="M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
</svg>

After

Width:  |  Height:  |  Size: 904 B

17
icons/wine-off.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M8 22h8" />
<path d="M7 10h3m7 0h-1.343" />
<path d="M12 15v7" />
<path d="M7.307 7.307A12.33 12.33 0 0 0 7 10a5 5 0 0 0 7.391 4.391M8.638 2.981C8.75 2.668 8.872 2.34 9 2h6c1.5 4 2 6 2 8 0 .407-.05.809-.145 1.198" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 483 B

View File

@@ -17,7 +17,8 @@
"generate:supersprite": "node ./scripts/generateSuperSVG.mjs",
"optimize": "node ./scripts/optimizeSvgs.mjs",
"addtags": "node ./scripts/addMissingKeysToTags.mjs",
"generate:changelog": "node ./scripts/generateChangelog.mjs"
"generate:changelog": "node ./scripts/generateChangelog.mjs",
"postinstall": "husky install"
},
"devDependencies": {
"@atomico/rollup-plugin-sizes": "^1.1.4",
@@ -39,7 +40,7 @@
"eslint-config-prettier": "^2.10.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^2.7.0",
"husky": "^4.3.8",
"husky": "^8.0.0",
"jest": "^28.1.3",
"lint-staged": "^10.5.4",
"minimist": "^1.2.6",
@@ -62,5 +63,6 @@
},
"lint-staged": {
"icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
}
},
"packageManager": "pnpm@7.14.0"
}

View File

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for angular applications.
```sh
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -39,7 +41,6 @@ import { Activity } from 'lucide-angular/icons';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
const div = document.getElementById('lucide-icon');
@@ -53,7 +54,7 @@ export class AppComponent implements OnInit {
}
```
### Method 2: User __Tag__ with __name__ property
### Method 2: User **Tag** with **name** property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
@@ -67,9 +68,7 @@ import { AppComponent } from './app.component';
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
@@ -87,7 +86,7 @@ export class AppModule { }
<lucide-icon name="edit" class="myicon"></lucide-icon>
```
### Method 3: User __Tag__ with __img__ property
### Method 3: User **Tag** with **img** property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
@@ -101,14 +100,8 @@ import { AppComponent } from './app.component';
import { LucideAngularModule } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ })
],
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
providers: [],
bootstrap: [AppComponent]
})
@@ -131,7 +124,6 @@ import { Airplay, Circle } from 'lucide-angular';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ico1 = Airplay;
ico2 = Circle;

View File

@@ -1,7 +1,7 @@
{
"name": "lucide-angular",
"description": "A Lucide icon library package for Angular applications",
"version": "0.92.0",
"version": "0.93.0",
"author": "SMAH1",
"license": "ISC",
"homepage": "https://lucide.dev",
@@ -34,34 +34,35 @@
"version": "pnpm version --git-tag-version=false"
},
"dependencies": {
"tslib": "^2.3.1"
"tslib": "^2.4.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.5",
"@angular/cli": "~11.2.15",
"@angular/common": "~11.2.14",
"@angular/compiler": "~11.2.14",
"@angular/compiler-cli": "~11.2.14",
"@angular/core": "~11.2.14",
"@angular/platform-browser": "~11.2.14",
"@angular/platform-browser-dynamic": "~11.2.14",
"@types/jasmine": "~3.10.2",
"@types/node": "^16.11.7",
"@angular-devkit/build-angular": "~14.2.6",
"@angular/cli": "~14.2.6",
"@angular/common": "~14.2.7",
"@angular/compiler": "~14.2.7",
"@angular/compiler-cli": "~14.2.7",
"@angular/core": "~14.2.7",
"@angular/platform-browser": "~14.2.7",
"@angular/platform-browser-dynamic": "~14.2.7",
"@types/jasmine": "~4.3.0",
"@types/node": "^18.11.4",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.10.1",
"jasmine-core": "~4.4.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.14",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"ng-packagr": "^11.2.4",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"ng-packagr": "^14.2.1",
"protractor": "~7.0.0",
"puppeteer": "^8.0.0",
"rxjs": "6.5.3",
"ts-node": "~10.4.0",
"puppeteer": "^19.1.0",
"rxjs": "7.5.7",
"ts-node": "~10.9.1",
"tslint": "~6.1.0",
"typescript": "~4.1.5",
"zone.js": "^0.11.7"
"typescript": "~4.8.4",
"zone.js": "^0.11.8"
}
}

View File

@@ -13,7 +13,6 @@
"serve": "vite preview"
},
"dependencies": {
"@emotion/core": "^10.0.14",
"minimist": "^1.2.6",
"react": "^17.0.0",
"react-dom": "^17.0.0"

View File

@@ -1,6 +1,6 @@
name: lucide_icons
description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
version: 0.92.0
version: 0.93.0
homepage: https://lucide.dev
repository: https://github.com/lucide-icons/lucide

View File

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
@@ -29,7 +31,7 @@ import { Camera } from 'lucide-preact';
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -37,11 +39,11 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props / svg attributes
@@ -50,7 +52,7 @@ You can also pass custom props that will be added in the as attributes. With tha
```js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel"/>
return <Camera fill="red" stroke-linejoin="bevel" />;
};
```
@@ -70,7 +72,7 @@ import * as icons from 'lucide-preact';
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -1,7 +1,7 @@
{
"name": "lucide-preact",
"description": "A Lucide icon library package for Preact applications",
"version": "0.92.0",
"version": "0.93.0",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",

View File

@@ -6,13 +6,15 @@ Implementation of the lucide icon library for React Native applications.
## Installation
First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install the package:
First, ensure that you have`react-native-svg@^12.0.0` or `react-native-svg@^13.0.0` installed. Then, install the package:
```sh
yarn add lucide-react-native
```
# or
or
```sh
npm install lucide-react-native
```
@@ -29,7 +31,7 @@ You can pass additional props to adjust the icon.
import { Camera } from 'lucide-react-native';
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -37,11 +39,11 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props
@@ -49,7 +51,7 @@ You can also pass custom props that will be added in the svg as attributes.
```js
const App = () => {
return <Camera fill="red"/>
return <Camera fill="red" />;
};
```
@@ -65,7 +67,7 @@ import * as icons from 'lucide-react-native';
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -19,7 +19,9 @@
"typings": "dist/lucide-react-native.d.ts",
"react-native": "dist/esm/lucide-react-native.js",
"sideEffects": false,
"files": ["dist"],
"files": [
"dist"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
"copy:license": "cp ../../LICENSE ./LICENSE",
@@ -38,12 +40,12 @@
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-native": "^0.69.0",
"react-native-svg": "^12.0.0"
"react-native-svg": "^13.0.0"
},
"peerDependencies": {
"prop-types": "^15.7.2",
"react": "^16.5.1 || ^17.0.0 || ^18.0.0",
"react-native": ">=0.50.0",
"react-native-svg": "^12.0.0"
"react-native": "*",
"react-native-svg": "^12.0.0 || ^13.0.0"
}
}

View File

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for react applications.
```sh
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -27,7 +29,7 @@ You can pass additional props to adjust the icon.
import { Camera } from 'lucide-react';
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -35,11 +37,11 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props
@@ -47,7 +49,7 @@ You can also pass custom props that will be added in the svg as attributes.
```js
const App = () => {
return <Camera fill="red"/>
return <Camera fill="red" />;
};
```
@@ -63,7 +65,7 @@ import * as icons from 'lucide-react';
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -1,7 +1,7 @@
{
"name": "lucide-react",
"description": "A Lucide icon library package for React applications",
"version": "0.92.0",
"version": "0.93.0",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",

View File

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for solid applications.
```sh
yarn add lucide-solid
```
# or
or
```sh
npm install lucide-solid
```
@@ -29,7 +31,7 @@ import { Camera } from 'lucide-solid';
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -37,11 +39,11 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props / svg attributes
@@ -50,7 +52,7 @@ You can also pass custom props that will be added in the as attributes. With tha
```js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel"/>
return <Camera fill="red" stroke-linejoin="bevel" />;
};
```

View File

@@ -21,9 +21,11 @@ This package is suitable for very specific use cases for example if you want to
```sh
yarn add lucide-static
```
# or
or
```sh
npm install lucide-static
```
@@ -31,13 +33,13 @@ npm install lucide-static
```html
<!-- Svg File -->
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
<!-- Icon Font -->
<style>
@font-face {
font-family: "LucideIcons";
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
font-family: 'LucideIcons';
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
}
</style>
```
@@ -54,14 +56,15 @@ To use it in for example html:
```html
<!-- Svg File -->
<img src="~lucide-static/icons/home.svg">
<img src="~lucide-static/icons/home.svg" />
```
```css
.home-icon {
background-image: url(~lucide-static/icons/home.svg)
background-image: url(~lucide-static/icons/home.svg);
}
```
Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)
#### Svg file Inline
@@ -70,7 +73,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
```js
import arrowRightIcon from 'lucide-static/icons/arrow-right'
import arrowRightIcon from 'lucide-static/icons/arrow-right';
// return string of a svg
```
@@ -81,7 +84,7 @@ You may need additional loader for this.
```html
<!-- Icon Sprite, not recommended for production! -->
<img src="lucide-static/sprite.svg#home">
<img src="lucide-static/sprite.svg#home" />
<!-- or -->
<svg
@@ -96,9 +99,7 @@ You may need additional loader for this.
<use href="#alert-triangle" />
</svg>
<svg>
...sprite svg
</svg>
<svg>...sprite svg</svg>
```
If you'd prefer, you can use CSS to hold your base SVG properties
@@ -134,20 +135,19 @@ and update the svg as follows
### Icon Font
```css
@import("~lucide-static/font/Lucide.css")
@import ('~lucide-static/font/Lucide.css');
```
```html
<div class="icon-home"></div>
```
### Node.js
To use lucide icons in your Nodejs project you can import each icon as:
```js
const { messageSquare } = require('lucide-static/lib')
const { messageSquare } = require('lucide-static/lib');
```
> Note: Each icon name is in camelCase.
@@ -155,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
#### Example in node.js project
```js
const express = require('express')
const { messageSquare } = require('lucide-static/lib')
const app = express()
const port = 3000
const express = require('express');
const { messageSquare } = require('lucide-static/lib');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send(`
@@ -173,12 +173,12 @@ app.get('/', (req, res) => {
</body>
</html>
`)
})
`);
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
console.log(`Example app listening at http://localhost:${port}`);
});
```
## Contributing

View File

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for svelte applications.
```sh
yarn add lucide-svelte
```
# or
or
```sh
npm install lucide-svelte
```
@@ -42,14 +44,14 @@ import { Camera } from 'lucide-svelte'
### Available props
| name | type | default
| -------------- | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth` | *Number* | 2
| `*<SVGProps>` | *String* | -
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `*<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)
- 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

View File

@@ -1,7 +1,7 @@
{
"name": "lucide-svelte",
"description": "A Lucide icon library package for Svelte applications",
"version": "0.92.0",
"version": "0.93.0",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",

View File

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for Vue 3 applications.
```sh
yarn add lucide-vue-next
```
# or
or
```sh
npm install lucide-vue-next
```
@@ -27,10 +29,7 @@ You can pass additional props to adjust the icon.
```vue
<template>
<Camera
color="red"
:size="32"
/>
<Camera color="red" :size="32" />
</template>
<script>
@@ -38,21 +37,20 @@ You can pass additional props to adjust the icon.
import { Camera } from 'lucide-vue-next';
export default {
name: "My Component",
name: 'My Component',
components: { Camera }
}
};
</script>
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
| name | type | default |
| -------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `defaultClass` | _String_ | lucide-icon |
### Custom props
@@ -78,20 +76,20 @@ It is possible to create one generic icon component to load icons.
</template>
<script>
import * as icons from "lucide-vue-next";
import * as icons from 'lucide-vue-next';
export default {
props: {
name: {
type: String,
required: true,
},
required: true
}
},
computed: {
icon() {
return icons[this.name];
},
},
}
}
};
</script>
```

View File

@@ -1,6 +1,6 @@
{
"name": "lucide-vue-next",
"version": "0.92.0",
"version": "0.93.0",
"author": "Eric Fennis",
"description": "A Lucide icon library package for Vue 3 applications",
"license": "ISC",

View File

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for Vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
@@ -27,10 +29,7 @@ You can pass additional props to adjust the icon.
```vue
<template>
<Camera
color="red"
:size="32"
/>
<Camera color="red" :size="32" />
</template>
<script>
@@ -38,21 +37,20 @@ You can pass additional props to adjust the icon.
import { Camera } from 'lucide-vue';
export default {
name: "My Component",
name: 'My Component',
components: { Camera }
}
};
</script>
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
| name | type | default |
| -------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `defaultClass` | _String_ | lucide-icon |
### Custom props
@@ -78,20 +76,20 @@ It is possible to create one generic icon component to load icons.
</template>
<script>
import * as icons from "lucide-vue";
import * as icons from 'lucide-vue';
export default {
props: {
name: {
type: String,
required: true,
},
required: true
}
},
computed: {
icon() {
return icons[this.name];
},
},
}
}
};
</script>
```
@@ -109,17 +107,21 @@ export default {
## 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
<IconCamera color="red" :size="32" />
```

View File

@@ -1,6 +1,6 @@
{
"name": "lucide-vue",
"version": "0.92.0",
"version": "0.93.0",
"author": "Eric Fennis",
"description": "A Lucide icon library package for Vue 2 applications",
"license": "ISC",

View File

@@ -6,9 +6,13 @@ Implementation of the lucide icon library for web applications.
### Package Managers
``` bash
```sh
npm install lucide
#or
```
or
```sh
yarn add lucide
```
@@ -65,8 +69,8 @@ createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
Globe
}
});
```
@@ -83,9 +87,9 @@ createIcons({
attrs: {
class: ['my-custom-class', 'icon'],
'stroke-width': 1,
stroke: '#333',
stroke: '#333'
},
nameAttr: 'icon-name', // attribute for the icon name.
nameAttr: 'icon-name' // attribute for the icon name.
});
```
@@ -98,8 +102,8 @@ createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
Globe
}
});
```

View File

@@ -1,7 +1,7 @@
{
"name": "lucide",
"description": "A Lucide icon library package for web and javascript applications.",
"version": "0.92.0",
"version": "0.93.0",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",

8464
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -16,8 +16,6 @@
},
"dependencies": {
"@chakra-ui/react": "1.8.8",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@mdx-js/loader": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@next/mdx": "^11.0.0",

View File

@@ -1,6 +1,5 @@
import { Button, Flex, Link, WrapItem, Text, Wrap, Heading } from '@chakra-ui/react';
import download from 'downloadjs';
import JSZip from 'jszip';
import { Download, Github } from 'lucide-react';
import NextLink from 'next/link';
import { IconCustomizerDrawer } from './IconCustomizerDrawer';
@@ -12,7 +11,6 @@ import PreactLogo from '../../public/framework-logos/preact.svg';
import AngularLogo from '../../public/framework-logos/angular.svg';
import FlutterLogo from '../../public/framework-logos/flutter.svg';
import SvelteLogo from '../../public/framework-logos/svelte.svg';
import LaravelLogo from '../../public/framework-logos/laravel.svg';
import { useState } from 'react';
import { useCustomizeIconContext } from './CustomizeIconContext';
import { IconEntity } from '../types';
@@ -20,6 +18,8 @@ import { IconEntity } from '../types';
type IconContent = [icon: string, src:string];
async function generateZip(icons: IconContent[]) {
const JSZip = (await import('jszip')).default
const zip = new JSZip();
const addingZipPromises = icons.map(([name, src]) =>
@@ -73,6 +73,12 @@ const Header = ({ data }: HeaderProps) => {
href: '/docs/lucide-react',
label: 'Lucide documentation for React',
},
{
name: 'lucide-react-native',
Logo: ReactLogo,
href: '/docs/lucide-react-native',
label: 'Lucide documentation for React Native',
},
{
name: 'lucide-vue',
Logo: VueLogo,
@@ -109,12 +115,6 @@ const Header = ({ data }: HeaderProps) => {
href: '/docs/lucide-flutter',
label: 'Lucide documentation for Flutter',
},
{
name: 'lucide-laravel',
Logo: LaravelLogo,
href: 'https://github.com/mallardduck/blade-lucide-icons',
label: 'Lucide documentation for Laravel',
},
];
return (
@@ -159,6 +159,13 @@ const Header = ({ data }: HeaderProps) => {
</NextLink>
</WrapItem>
))}
<WrapItem>
<NextLink href="/packages" passHref>
<Link _hover={{ opacity: 0.8 }} marginX="auto">
<Text fontSize="md" opacity={0.5}>More options</Text>
</Link>
</NextLink>
</WrapItem>
</Wrap>
<Wrap marginTop={3} marginBottom={12} spacing="15px" justify="center">
<WrapItem>

View File

@@ -6,7 +6,7 @@ import {useContext, useEffect, useRef} from "react";
import {IconStyleContext} from "./CustomizeIconContext";
import {IconWrapper} from "./IconWrapper";
import ModifiedTooltip from "./ModifiedTooltip";
import { IconData } from "../lib/icons";
import { IconEntity } from "../types";
type IconDownload = {
src: string;
@@ -16,7 +16,7 @@ type IconDownload = {
interface IconDetailOverlayProps {
open: boolean
close: () => void
icon?: IconData
icon?: IconEntity
}
const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps) => {
@@ -152,7 +152,7 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
className="icon-large"
>
<IconWrapper
content={icon.content}
src={icon.src}
stroke={color}
strokeWidth={strokeWidth}
height={size}
@@ -229,8 +229,8 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
</Heading>
<AvatarGroup size="md">
{ icon.contributors.map((commit, index) => (
<Link href={`https://github.com/${commit.author}`} isExternal key={`${index}_${commit.commit}`}>
<Tooltip label={commit.author} key={commit.commit}>
<Link href={`https://github.com/${commit.author}`} isExternal key={`${index}_${commit.author}`}>
<Tooltip label={commit.author} key={commit.author}>
<Avatar name={commit.author} src={`https://github.com/${commit.author}.png?size=88`} />
</Tooltip>
</Link>

View File

@@ -2,8 +2,8 @@ import { Grid } from '@chakra-ui/react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { memo } from 'react';
import { IconEntity } from '../types';
import IconListItem from './IconListItem';
import { IconEntity } from '../types';
interface IconListProps {
icons: IconEntity[];

View File

@@ -1,19 +1,16 @@
import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
import download from 'downloadjs';
import { memo } from 'react';
import { Contributor } from '../lib/fetchAllContributors';
import { useCustomizeIconContext } from './CustomizeIconContext';
import { IconWrapper } from './IconWrapper';
interface IconListItemProps {
name: string;
content: string;
contributors: Contributor[]
src: string;
onClick?: ButtonProps['onClick']
src: string;
}
const IconListItem = ({ name, content, onClick, src: svg }: IconListItemProps) => {
const IconListItem = ({ name, onClick, src: svg }: IconListItemProps) => {
const toast = useToast();
const { color, size, strokeWidth, iconsRef } = useCustomizeIconContext();
@@ -53,7 +50,7 @@ const IconListItem = ({ name, content, onClick, src: svg }: IconListItemProps) =
<Flex direction="column" align="center" justify="stretch" width="100%" gap={4}>
<Flex flex={2} flexBasis="100%" minHeight={10} align="flex-end">
<IconWrapper
content={content}
src={svg}
stroke={color}
strokeWidth={strokeWidth}
height={size}

View File

@@ -1,9 +1,9 @@
import { Box, Text } from '@chakra-ui/react';
import React, { useState } from 'react';
import useSearch from '../lib/useSearch';
import { IconEntity } from '../types';
import IconList from './IconList';
import { SearchInput } from './SearchInput';
import { IconEntity } from '../types';
interface IconOverviewProps {
data: IconEntity[];

View File

@@ -1,7 +1,7 @@
import { forwardRef, SVGProps } from 'react';
interface IconWrapperProps extends SVGProps<SVGSVGElement> {
content: string;
src: string;
}
export const IconWrapper = forwardRef<SVGSVGElement, IconWrapperProps>((props, ref) => {
@@ -17,11 +17,12 @@ export const IconWrapper = forwardRef<SVGSVGElement, IconWrapperProps>((props, r
strokeLinejoin: 'round',
};
const { content, ...rest } = props;
const { src, ...rest } = props;
const attrs = {
...defaultAttrs,
...rest,
};
const content = src.replace(/<svg[^>]*>|<\/svg>/g, '');
return <svg ref={ref} {...attrs} dangerouslySetInnerHTML={{ __html: content }} />;
});

View File

@@ -87,7 +87,7 @@ const Package = ({ name, description, icon, shields, source, documentation }: Pa
<Text mb={3}>{description}</Text>
<ButtonGroup spacing={2}>
{shields.map(({ alt, src, href }, index) => (
<Link href={href} passHref>
<Link key={index} href={href} passHref>
<a target="_blank">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img {...{ alt, src }} key={index} />

View File

@@ -76,6 +76,10 @@ const docsMenuTree = [
title: 'Lucide React',
href: 'lucide-react'
},
{
title: 'Lucide React Native',
href: 'lucide-react-native'
},
{
title: 'Lucide Vue',
href: 'lucide-vue'

View File

@@ -1,17 +1,13 @@
import crypto from 'crypto';
import fs from 'fs';
import path from 'path';
export interface Contributor {
author: string
commit: string
}
import { Contributor } from '../types';
const IGNORE_COMMIT_MESSAGES = ['fork', 'optimize'];
function getContentHashOfFile(path) {
return new Promise((resolve, reject) => {
const hash = crypto.createHash('md4');
const hash = crypto.createHash('sha256');
const stream = fs.createReadStream(path);
stream.on('error', err => reject(err));
stream.on('data', chunk => hash.update(chunk));
@@ -22,11 +18,12 @@ function getContentHashOfFile(path) {
const fetchCommitsOfIcon = async (name) =>{
try {
const headers = new Headers();
const username = 'ericfennis';
const token = process.env.GITHUB_TOKEN;
const username = process.env.GITHUB_USERNAME;
const password = process.env.GITHUB_API_KEY;
headers.set(
'Authorization',
`Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`,
token ? `Bearer ${token}` : `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`,
);
const res = await fetch(
@@ -54,9 +51,8 @@ export const filterCommits = (commits) =>
!IGNORE_COMMIT_MESSAGES.some(ignoreItem =>
commit.message.toLowerCase().includes(ignoreItem),
))
.map(({ sha, author }) => ({
.map(({ author }) => ({
author: author && author.login ? author.login : null,
commit: sha,
}))
.filter(({ author }, index, self) => self.findIndex((commit) => commit.author === author) === index);

View File

@@ -2,7 +2,8 @@ import fs from "fs";
import path from "path";
import { parseSync, stringify } from 'svgson';
import tags from '../../../tags.json';
import { Contributor, getContributors } from "./fetchAllContributors";
import { IconEntity } from "../types";
import { getContributors } from "./fetchAllContributors";
const directory = path.join(process.cwd(), "../icons");
@@ -28,20 +29,11 @@ export async function getData(name: string) {
name,
tags: tags[name] || [],
contributors,
src: fileContent,
content: svgContent
src: fileContent
};
}
export interface IconData {
name: string
tags: string[]
contributors: Contributor[]
src: string
content: string
}
export async function getAllData(): Promise<IconData[]> {
export async function getAllData(): Promise<IconEntity[]> {
const names = getAllNames();
return Promise.all(names.map((name) => getData(name)));

View File

@@ -1,5 +1,5 @@
import Layout from '../components/Layout';
import { getAllData, IconData } from '../lib/icons';
import { getAllData } from '../lib/icons';
import IconOverview from '../components/IconOverview';
import IconDetailOverlay from '../components/IconDetailOverlay';
@@ -8,9 +8,10 @@ import Header from '../components/Header';
import MobileMenu from '../components/MobileMenu';
import { useMemo } from 'react';
import { GetStaticPropsResult, NextPage } from 'next';
import { IconEntity } from '../types';
interface HomePageProps {
data: IconData[]
data: IconEntity[]
}
const HomePage: NextPage<HomePageProps> = ({ data }) => {

View File

@@ -23,14 +23,18 @@ const PackagesPage = ({ packages, thirdPartyPackages }: PackagesPageProps): JSX.
Packages
</Heading>
<Stack spacing={8} align="center">
{packages.length ? packages.map(packageItem => <Package {...packageItem} />) : null}
{packages.length
? packages.map((packageItem) => <Package key={packageItem.name} {...packageItem} />)
: null}
</Stack>
<Heading as="h1" marginBottom={6} marginTop={12} textAlign="center">
Third party packages
</Heading>
<Stack spacing={8} marginBottom={6} align="center">
{thirdPartyPackages.length ? thirdPartyPackages.map(packageItem => <Package {...packageItem} />) : null}
{thirdPartyPackages.length
? thirdPartyPackages.map((packageItem) => (<Package key={packageItem.name} {...packageItem} />))
: null}
</Stack>
</Layout>
</HeadingNavigationProvider>

View File

@@ -1,5 +1,4 @@
export interface IconEntity {
content: string;
contributors: Contributor[];
name: string;
src: string;
@@ -8,5 +7,4 @@ export interface IconEntity {
export interface Contributor {
author: string;
commit: string;
}

263
tags.json
View File

@@ -446,12 +446,21 @@
"beaker": [
"cup"
],
"beer": [
"alcohol",
"bar",
"beverage",
"brewery",
"drink"
"bean": [
"legume",
"soy",
"food",
"seed"
],
"bean-off": [
"soy free",
"legume",
"soy",
"food",
"seed",
"allergy",
"intolerance",
"diet"
],
"bed": [
"sleep",
@@ -468,6 +477,13 @@
"hotel",
"furniture"
],
"beer": [
"alcohol",
"bar",
"beverage",
"brewery",
"drink"
],
"bell": [
"alarm",
"notification",
@@ -749,6 +765,19 @@
"webcam",
"video"
],
"candy": [
"sugar",
"food",
"sweet"
],
"candy-off": [
"sugar free",
"food",
"sweet",
"allergy",
"intolerance",
"diet"
],
"car": [
"vehicle",
"transport",
@@ -763,9 +792,20 @@
"chromecast",
"airplay"
],
"cat": [
"animal",
"pet",
"kitten",
"feline"
],
"check": [
"done"
],
"check-check": [
"done",
"received",
"double"
],
"check-circle": [
"done"
],
@@ -845,7 +885,8 @@
"vertical"
],
"chrome": [
"browser"
"browser",
"logo"
],
"cigarette": [
"smoking"
@@ -857,7 +898,8 @@
"circle": [
"off",
"zero",
"record"
"record",
"shape"
],
"circle-dot": [
"pending",
@@ -875,7 +917,8 @@
"zero",
"Ø",
"null",
"nothing"
"nothing",
"maths"
],
"citrus": [
"lemon",
@@ -1239,7 +1282,8 @@
"square",
"rectangle",
"oblique",
"rhombus"
"rhombus",
"shape"
],
"dice-1": [
"dice",
@@ -1301,7 +1345,8 @@
"difference",
"plus",
"minus",
"plus-minus"
"plus-minus",
"maths"
],
"disc": [
"album",
@@ -1310,13 +1355,39 @@
"music"
],
"divide": [
"calculate"
"calculate",
"maths"
],
"divide-circle": [
"calculate"
"calculate",
"maths"
],
"divide-square": [
"calculate"
"calculate",
"maths"
],
"dna": [
"gene",
"gmo",
"helix",
"heredity",
"chromosome",
"nucleic acid"
],
"dna-off": [
"gene",
"gmo free",
"helix",
"heredity",
"chromosome",
"nucleic acid"
],
"dog": [
"animal",
"pet",
"puppy",
"hound",
"canine"
],
"dollar-sign": [
"currency",
@@ -1379,11 +1450,13 @@
"breakfast"
],
"equal": [
"calculate"
"calculate",
"maths"
],
"equal-not": [
"calculate",
"off"
"off",
"maths"
],
"eraser": [
"pencil",
@@ -1782,6 +1855,11 @@
"beaker",
"erlenmeyer"
],
"flask-conical-off": [
"beaker",
"erlenmeyer",
"non toxic"
],
"flask-round": [
"beaker"
],
@@ -1996,7 +2074,8 @@
"function-square": [
"programming",
"code",
"automation"
"automation",
"maths"
],
"joystick": [
"game",
@@ -2229,6 +2308,20 @@
"house",
"living"
],
"hop": [
"beer",
"brewery",
"drink"
],
"hop-off": [
"beer",
"brewery",
"drink",
"hop free",
"allergy",
"intolerance",
"diet"
],
"hourglass": [
"timer",
"time",
@@ -2272,7 +2365,8 @@
"infinity": [
"unlimited",
"forever",
"loop"
"loop",
"maths"
],
"info": [
"help"
@@ -2287,6 +2381,7 @@
],
"instagram": [
"logo",
"social",
"camera"
],
"italic": [
@@ -2299,6 +2394,11 @@
"money",
"payment"
],
"joystick": [
"game",
"console",
"control stick"
],
"key": [
"password",
"login",
@@ -2451,7 +2551,7 @@
],
"linkedin": [
"logo",
"social media"
"social"
],
"list": [
"options"
@@ -2758,6 +2858,24 @@
"signpost",
"version control"
],
"milk": [
"lactose",
"bottle",
"beverage",
"drink",
"water",
"diet"
],
"milk-off": [
"lactose free",
"bottle",
"beverage",
"drink",
"water",
"allergy",
"intolerance",
"diet"
],
"minimize": [
"exit fullscreen",
"close",
@@ -2771,15 +2889,18 @@
],
"minus": [
"subtract",
"calculate"
"calculate",
"maths"
],
"minus-circle": [
"subtract",
"calculate"
"calculate",
"maths"
],
"minus-square": [
"subtract",
"calculate"
"calculate",
"maths"
],
"monitor": [
"tv",
@@ -2914,8 +3035,23 @@
"article",
"headline"
],
"nut": [
"hazelnut",
"acorn",
"food",
"diet"
],
"nut-off": [
"hazelnut",
"acorn",
"food",
"allergy",
"intolerance",
"diet"
],
"octagon": [
"stop"
"stop",
"shape"
],
"option": [
"key",
@@ -3103,15 +3239,18 @@
],
"plus": [
"add",
"new"
"new",
"maths"
],
"plus-circle": [
"add",
"new"
"new",
"maths"
],
"plus-square": [
"add",
"new"
"new",
"maths"
],
"pocket": [
"logo",
@@ -3169,13 +3308,15 @@
"rectangle",
"aspect ratio",
"16:9",
"horizontal"
"horizontal",
"shape"
],
"rectangle-vertical": [
"rectangle",
"aspect ratio",
"9:16",
"vertical"
"vertical",
"shape"
],
"recycle": [
"sustainability",
@@ -3211,7 +3352,8 @@
],
"regex": [
"search",
"text"
"text",
"code"
],
"repeat": [
"loop",
@@ -3479,7 +3621,8 @@
],
"sigma": [
"sum",
"calculate"
"calculate",
"maths"
],
"signal": [
"connection",
@@ -3644,7 +3787,8 @@
"square": [
"rectangle",
"aspect ratio",
"1:1"
"1:1",
"shape"
],
"star": [
"bookmark",
@@ -3958,7 +4102,9 @@
"park",
"nature"
],
"trello": [],
"trello": [
"logo"
],
"trending-down": [
"statistics"
],
@@ -3966,7 +4112,8 @@
"statistics"
],
"triangle": [
"delta"
"delta",
"shape"
],
"trophy": [
"prize",
@@ -3993,7 +4140,8 @@
"display"
],
"twitch": [
"logo"
"logo",
"social"
],
"twitter": [
"logo",
@@ -4105,6 +4253,13 @@
"dinner",
"supper"
],
"vegan": [
"vegetarian",
"fruitarian",
"herbivorous",
"animal rights",
"diet"
],
"venetian-mask": [
"mask",
"masquerade",
@@ -4197,6 +4352,21 @@
"interface",
"callback"
],
"wheat": [
"corn",
"cereal",
"grain",
"gluten"
],
"wheat-off": [
"corn",
"cereal",
"grain",
"gluten free",
"allergy",
"intolerance",
"diet"
],
"wifi": [
"connection",
"signal",
@@ -4220,6 +4390,18 @@
"vineyard",
"winery"
],
"wine-off": [
"alcohol",
"beverage",
"drink",
"glass",
"alcohol free",
"abstinence",
"abstaining",
"teetotalism",
"allergy",
"intolerance"
],
"wrap-text": [
"words",
"lines",
@@ -4237,7 +4419,8 @@
"delete",
"remove",
"times",
"clear"
"clear",
"maths"
],
"x-circle": [
"cancel",
@@ -4245,7 +4428,8 @@
"delete",
"remove",
"times",
"clear"
"clear",
"maths"
],
"x-octagon": [
"delete",
@@ -4253,7 +4437,8 @@
"alert",
"warning",
"times",
"clear"
"clear",
"maths"
],
"x-square": [
"cancel",
@@ -4261,10 +4446,12 @@
"delete",
"remove",
"times",
"clear"
"clear",
"maths"
],
"youtube": [
"logo",
"social",
"video",
"play"
],