Compare commits

...

7 Commits

Author SHA1 Message Date
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
45 changed files with 624 additions and 2484 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

@@ -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
@@ -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,7 +735,7 @@ jobs:
]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- name: Commit package files

View File

@@ -56,9 +56,11 @@ Implementation of the lucide icon library for web applications.
```sh
npm install lucide
```
#or
or
```sh
yarn add lucide
```
@@ -70,9 +72,11 @@ Implementation of the lucide icon library for react applications.
```sh
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -84,9 +88,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 +104,11 @@ Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
@@ -112,9 +120,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 +134,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 +150,11 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
@@ -157,9 +171,11 @@ NPM package
```sh
yarn add lucide-static
```
# or
or
```sh
npm install lucide-static
```
@@ -197,9 +213,11 @@ Implementation of the lucide icon library for Svelte applications.
```sh
yarn add lucide-svelte
```
# or
or
```sh
npm install lucide-svelte
```
@@ -211,9 +229,11 @@ Implementation of the lucide icon library for solid applications.
```sh
yarn add lucide-solid
```
#or
or
```sh
npm install lucide-solid
```
@@ -245,4 +265,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

@@ -4,11 +4,13 @@ Implementation of the lucide icon library for angular applications.
## Installation
``` sh
```sh
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -20,12 +22,12 @@ There are three ways for use this library.
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
``` html
```html
<!-- app.component.html -->
<div id="lucide-icon"></div>
```
``` js
```js
// app.component.ts
import { Component, OnInit } from '@angular/core';
@@ -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,11 +52,11 @@ 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`.
``` js
```js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@@ -65,32 +66,29 @@ import { AppComponent } from './app.component';
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}
```
``` html
```html
<!-- app.component.html -->
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
<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`.
``` js
```js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@@ -100,28 +98,21 @@ 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 { }
export class AppModule {}
```
``` xml
```xml
<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
```
``` js
```js
// app.component.ts
import { Component } from '@angular/core';
import { Airplay, Circle } from 'lucide-angular';
@@ -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;
@@ -144,7 +134,7 @@ export class AppComponent {
In `Method 2`: import all icons in `app.module.ts` by:
``` js
```js
import { icons } from 'lucide-angular/icons';

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
```
@@ -25,13 +27,13 @@ Each icon can be imported as a preact component.
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-preact';
// Returns PreactComponent
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -39,20 +41,20 @@ 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
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
```js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel"/>
return <Camera fill="red" stroke-linejoin="bevel" />;
};
```
@@ -62,17 +64,17 @@ const App = () => {
It is possible to create one generic icon component to load icons.
> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
#### Icon Component Example
``` js
```js
import * as icons from 'lucide-preact';
const Icon = ({name, color, size}) => {
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

@@ -4,11 +4,13 @@ Implementation of the lucide icon library for react applications
## Installation
``` bash
```bash
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -21,13 +23,13 @@ Each icon can be imported as a react component.
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-react';
// Returns ReactComponent
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -35,20 +37,20 @@ 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
You can also pass custom props that will be added in the svg as attributes.
``` js
```js
// Usage
const App = () => {
return <Camera fill="red"/>
return <Camera fill="red" />;
};
```
@@ -56,17 +58,17 @@ const App = () => {
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.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
#### Icon Component Example
``` js
```js
import * as icons from 'lucide-react';
const Icon = ({name, color, size}) => {
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,23 +19,25 @@ 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
```
### CDN
``` html
```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>
```
@@ -50,14 +52,14 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
To use it in for example html:
``` html
```html
<!-- Svg File -->
<img src="~lucide-static/icons/home.svg">
<img src="~lucide-static/icons/home.svg" />
```
``` css
```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
@@ -104,13 +106,13 @@ If you'd prefer, you can use CSS to hold your base SVG properties
```css
.lucide-icon {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
```
@@ -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,17 +24,17 @@ Default usage:
```html
<script>
import { Skull } from 'lucide-svelte'
import { Skull } from 'lucide-svelte';
</script>
<Skull/>
<Skull />
```
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,10 +55,10 @@ import { Camera } from 'lucide-svelte'
```html
<script>
import { Phone } from 'lucide-svelte'
import { Phone } from 'lucide-svelte';
</script>
<Phone fill="#333"/>
<Phone fill="#333" />
```
This results a filled phone icon.
@@ -69,20 +71,20 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` html
```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
```html
<script>
import LucideIcon from "./LucideIcon";
import LucideIcon from './LucideIcon';
</script>
<LucideIcon name="Menu" />

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
```
@@ -23,40 +25,36 @@ Each icon can be imported as a vue component.
You can pass additional props to adjust the icon.
``` html
```html
<template>
<Camera
color="red"
:size="32"
/>
<Camera color="red" :size="32" />
</template>
<script>
// Returns Vue component
import { Camera } from 'lucide-vue';
export default {
name: "My Component",
components: { Camera }
}
// Returns Vue component
import { Camera } from 'lucide-vue';
export default {
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
You can also pass custom props that will be added in the svg as attributes.
``` html
```html
<template>
<Camera fill="red" />
</template>
@@ -70,33 +68,33 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` html
```html
<template>
<component :is="icon" />
</template>
<script>
import * as icons from "lucide-vue";
import * as icons from 'lucide-vue';
export default {
props: {
name: {
type: String,
required: true,
export default {
props: {
name: {
type: String,
required: true
}
},
},
computed: {
icon() {
return icons[this.name];
},
},
};
computed: {
icon() {
return icons[this.name];
}
}
};
</script>
```
##### Then you can use it like this
``` html
```html
<template>
<div id="app">
<Icon name="Airplay" />

View File

@@ -6,15 +6,19 @@ Implementation of the lucide icon library for web applications.
### Package Managers
``` bash
```sh
npm install lucide
#or
```
or
```sh
yarn add lucide
```
### CDN
``` html
```html
<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
@@ -56,7 +60,7 @@ The `createIcons` function will search for HTMLElements with the attribute `icon
import { createIcons, icons } from 'lucide';
// Caution, this will import all the icons and bundle them.
createIcons({icons});
createIcons({ icons });
// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from '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
}
});
```

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

View File

@@ -6,11 +6,13 @@ Implementation of the lucide icon library for angular applications.
## Installation
``` sh
```sh
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -22,12 +24,12 @@ There are three ways for use this library.
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
``` html
```html
<!-- app.component.html -->
<div id="lucide-icon"></div>
```
``` js
```js
// app.component.ts
import { Component, OnInit } from '@angular/core';
@@ -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,11 +54,11 @@ 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`.
``` js
```js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@@ -67,31 +68,29 @@ import { AppComponent } from './app.component';
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}
```
``` html
```html
<!-- app.component.html -->
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
<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`.
``` js
```js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@@ -101,27 +100,21 @@ 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 { }
export class AppModule {}
```
``` xml
```xml
<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
```
``` js
```js
// app.component.ts
import { Component } from '@angular/core';
import { Airplay, Circle } from 'lucide-angular';
@@ -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;
@@ -144,7 +136,7 @@ export class AppComponent {
In `Method 2`: import all icons in `app.module.ts` by:
``` js
```js
...
import { icons } from 'lucide-angular/icons';
....

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
```
@@ -23,13 +25,13 @@ Each icon can be imported as a preact component.
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-preact';
// Returns PreactComponent
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -37,20 +39,20 @@ 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
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
```js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel"/>
return <Camera fill="red" stroke-linejoin="bevel" />;
};
```
@@ -60,17 +62,17 @@ const App = () => {
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.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
#### Icon Component Example
``` js
```js
import * as icons from 'lucide-preact';
const Icon = ({name, color, size}) => {
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

@@ -10,9 +10,11 @@ First, ensure that you have`react-native-svg@^12.0.0` or `react-native-svg@^13.0
```sh
yarn add lucide-react-native
```
# or
or
```sh
npm install lucide-react-native
```

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
```
@@ -23,11 +25,11 @@ Each icon can be imported as a react component.
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-react';
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -35,19 +37,19 @@ 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
You can also pass custom props that will be added in the svg as attributes.
``` js
```js
const App = () => {
return <Camera fill="red"/>
return <Camera fill="red" />;
};
```
@@ -57,13 +59,13 @@ It is possible to create a generic icon component to load icons.
> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
``` js
```js
import * as icons from 'lucide-react';
const Icon = ({name, color, size}) => {
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 @@ Implementation of the lucide icon library for solid applications.
```sh
yarn add lucide-solid
```
# or
or
```sh
npm install lucide-solid
```
@@ -23,13 +25,13 @@ Each icon can be imported as a solid component.
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-solid';
// Returns SolidComponent
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -37,20 +39,20 @@ 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
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
```js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel"/>
return <Camera fill="red" stroke-linejoin="bevel" />;
};
```
@@ -58,11 +60,11 @@ const App = () => {
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.
> :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
```tsx
import * as icons from 'lucide-solid';
import type { LucideProps } from 'lucide-solid';
import { splitProps } from 'solid-js';

View File

@@ -21,23 +21,25 @@ 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
```
### CDN
``` html
```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,16 +54,17 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
To use it in for example html:
``` html
```html
<!-- Svg File -->
<img src="~lucide-static/icons/home.svg">
<img src="~lucide-static/icons/home.svg" />
```
``` css
```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,22 +99,20 @@ 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
```css
.lucide-icon {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
```
@@ -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
@@ -71,7 +73,7 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` svelte
```svelte
<script>
import * as icons from "lucide-svelte";
export let name;
@@ -82,7 +84,7 @@ It is possible to create one generic icon component to load icons.
##### Then you can use it like this
``` svelte
```svelte
<script>
import LucideIcon from "./LucideIcon";
</script>

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
```
@@ -25,12 +27,9 @@ Each icon can be imported as a vue component.
You can pass additional props to adjust the icon.
``` vue
```vue
<template>
<Camera
color="red"
:size="32"
/>
<Camera color="red" :size="32" />
</template>
<script>
@@ -38,27 +37,26 @@ 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
You can also pass custom props that will be added in the svg as attributes.
``` vue
```vue
<template>
<Camera fill="red" />
</template>
@@ -72,33 +70,33 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` vue
```vue
<template>
<component :is="icon" />
</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>
```
##### Then you can use it like this
``` vue
```vue
<template>
<div id="app">
<Icon name="Airplay" />

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
```
@@ -25,12 +27,9 @@ Each icon can be imported as a vue component.
You can pass additional props to adjust the icon.
``` vue
```vue
<template>
<Camera
color="red"
:size="32"
/>
<Camera color="red" :size="32" />
</template>
<script>
@@ -38,27 +37,26 @@ 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
You can also pass custom props that will be added in the svg as attributes.
``` vue
```vue
<template>
<Camera fill="red" />
</template>
@@ -72,33 +70,33 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` vue
```vue
<template>
<component :is="icon" />
</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>
```
##### Then you can use it like this
``` vue
```vue
<template>
<div id="app">
<Icon name="Airplay" />
@@ -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

@@ -6,15 +6,19 @@ Implementation of the lucide icon library for web applications.
### Package Managers
``` bash
```sh
npm install lucide
#or
```
or
```sh
yarn add lucide
```
### CDN
``` html
```html
<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
@@ -56,7 +60,7 @@ The `createIcons` function will search for HTMLElements with the attribute `icon
import { createIcons, icons } from 'lucide';
// Caution, this will import all the icons and bundle them.
createIcons({icons});
createIcons({ icons });
// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from '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
}
});
```

2194
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -11,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';
@@ -116,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 (
@@ -166,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

@@ -1,11 +1,7 @@
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'];
@@ -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

@@ -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;
}

View File

@@ -772,6 +772,11 @@
"check": [
"done"
],
"check-check": [
"done",
"received",
"double"
],
"check-circle": [
"done"
],