mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-17 04:37:42 +01:00
Compare commits
27 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
9e524fd557 | ||
|
|
b5c71c4fc3 | ||
|
|
aa8861a2cd | ||
|
|
a41918a81e | ||
|
|
33be2c2430 | ||
|
|
eb706417e6 | ||
|
|
01e11a61f8 | ||
|
|
b323bbd28e | ||
|
|
514e88bbf9 | ||
|
|
de6ed26152 | ||
|
|
b8cc9ea3c8 | ||
|
|
cc2ac8bfcd | ||
|
|
0e340a2679 | ||
|
|
c15e3914a6 | ||
|
|
ff81fbfd9a | ||
|
|
5317abb867 | ||
|
|
ac80b9e58f | ||
|
|
a25f139953 | ||
|
|
b457c8dea1 | ||
|
|
2e24567f8e | ||
|
|
9b90bc4d51 | ||
|
|
6fd0380e19 | ||
|
|
603ee05674 | ||
|
|
be15f5e54b | ||
|
|
ea409105ce | ||
|
|
969254d986 | ||
|
|
200cc17ef6 |
4
.github/workflows/ci.yml
vendored
4
.github/workflows/ci.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide-angular.yml
vendored
5
.github/workflows/lucide-angular.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide-preact.yml
vendored
5
.github/workflows/lucide-preact.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide-react-native.yml
vendored
5
.github/workflows/lucide-react-native.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide-react.yml
vendored
5
.github/workflows/lucide-react.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide-solid.yml
vendored
5
.github/workflows/lucide-solid.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide-static.yml
vendored
5
.github/workflows/lucide-static.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide-svelte.yml
vendored
5
.github/workflows/lucide-svelte.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide-vue-next.yml
vendored
5
.github/workflows/lucide-vue-next.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide-vue.yml
vendored
5
.github/workflows/lucide-vue.yml
vendored
@@ -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
|
||||
|
||||
|
||||
5
.github/workflows/lucide.yml
vendored
5
.github/workflows/lucide.yml
vendored
@@ -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
|
||||
|
||||
|
||||
57
.github/workflows/release.yml
vendored
57
.github/workflows/release.yml
vendored
@@ -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
|
||||
|
||||
@@ -345,10 +345,10 @@ jobs:
|
||||
run: pnpm --filter lucide-angular build
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-angular test:headless
|
||||
run: pnpm --filter lucide-angular test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-angular publish dist --no-git-checks
|
||||
run: pnpm --filter lucide-angular publish dist --no-git-checks --ignore-scripts
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -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
|
||||
|
||||
103
README.md
103
README.md
@@ -1,15 +1,15 @@
|
||||
<p align=center><img width="410" src="https://lucide.dev/logo-text.svg" alt="Lucide Logo"></p>
|
||||
<p align=center><img width="480" src="https://lucide.dev/lucide-logo-repo.svg" alt="Lucide Logo"></p>
|
||||
<p align="center">
|
||||
<a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide" alt="license"></a>
|
||||
<a href="https://www.npmjs.com/package/lucide"><img src="https://img.shields.io/npm/v/lucide" alt="npm package"></a>
|
||||
<a href="https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons"><img src="https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json" alt="figma installs"></a>
|
||||
<a href="https://github.com/lucide-icons/lucide/actions/workflows/release.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/release.yml/badge.svg" alt="build status"></a>
|
||||
<a href="https://discord.gg/EH6nSts"><img src="https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA" alt="discord chat"></a>
|
||||
</p>
|
||||
|
||||
# Lucide
|
||||
|
||||
|
||||
[](https://www.npmjs.com/package/lucide)
|
||||
[](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons)
|
||||
[](https://discord.gg/EH6nSts)
|
||||
|
||||
## What is Lucide?
|
||||
|
||||
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
|
||||
Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
|
||||
|
||||
It began after growing disaffection with the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
|
||||
|
||||
@@ -23,29 +23,25 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Lucide](#lucide)
|
||||
- [What is Lucide?](#what-is-lucide)
|
||||
- [Why choose Lucide over Feather Icons](#why-choose-lucide-over-feather-icons)
|
||||
- [Table of Contents](#table-of-contents)
|
||||
- [Usage](#usage)
|
||||
- [Web](#web)
|
||||
- [React](#react)
|
||||
- [React Native](#react-native)
|
||||
- [Vue 2](#vue-2)
|
||||
- [Vue 3](#vue-3)
|
||||
- [Angular](#angular)
|
||||
- [Preact](#preact)
|
||||
- [Static (svg sprite, font, icons ..)](#static-svg-sprite-font-icons-)
|
||||
- [Figma](#figma)
|
||||
- [Laravel](#laravel)
|
||||
- [Flutter](#flutter)
|
||||
- [Svelte](#svelte)
|
||||
- [Solid](#solid)
|
||||
- [Contributing](#contributing)
|
||||
- [Community](#community)
|
||||
- [License](#license)
|
||||
- [Credits](#credits)
|
||||
- [Sponsors](#sponsors)
|
||||
- [Usage](#usage)
|
||||
- [Web](#web)
|
||||
- [React](#react)
|
||||
- [React Native](#react-native)
|
||||
- [Vue 2](#vue-2)
|
||||
- [Vue 3](#vue-3)
|
||||
- [Angular](#angular)
|
||||
- [Preact](#preact)
|
||||
- [Static (svg sprite, font, icons ..)](#static-svg-sprite-font-icons-)
|
||||
- [Figma](#figma)
|
||||
- [Laravel](#laravel)
|
||||
- [Flutter](#flutter)
|
||||
- [Svelte](#svelte)
|
||||
- [Solid](#solid)
|
||||
- [Contributing](#contributing)
|
||||
- [Community](#community)
|
||||
- [License](#license)
|
||||
- [Credits](#credits)
|
||||
- [Sponsors](#sponsors)
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -60,9 +56,11 @@ Implementation of the lucide icon library for web applications.
|
||||
|
||||
```sh
|
||||
npm install lucide
|
||||
```
|
||||
|
||||
#or
|
||||
or
|
||||
|
||||
```sh
|
||||
yarn add lucide
|
||||
```
|
||||
|
||||
@@ -74,9 +72,11 @@ Implementation of the lucide icon library for react applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-react
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
@@ -88,13 +88,15 @@ Implementation of the lucide icon library for React Native applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-react-native
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react-native
|
||||
```
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react-native#lucide-react-native).
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react-native#lucide-react-native).
|
||||
|
||||
### Vue 2
|
||||
|
||||
@@ -102,9 +104,11 @@ Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-vue
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue
|
||||
```
|
||||
|
||||
@@ -116,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
|
||||
```
|
||||
|
||||
@@ -128,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
|
||||
```
|
||||
|
||||
@@ -142,9 +150,11 @@ Implementation of the lucide icon library for preact applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-preact
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-preact
|
||||
```
|
||||
|
||||
@@ -161,9 +171,11 @@ NPM package
|
||||
|
||||
```sh
|
||||
yarn add lucide-static
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-static
|
||||
```
|
||||
|
||||
@@ -201,9 +213,11 @@ Implementation of the lucide icon library for Svelte applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-svelte
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-svelte
|
||||
```
|
||||
|
||||
@@ -215,9 +229,11 @@ Implementation of the lucide icon library for solid applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-solid
|
||||
```
|
||||
|
||||
#or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-solid
|
||||
```
|
||||
|
||||
@@ -249,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>
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
## Laravel
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
```
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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}`);
|
||||
});
|
||||
```
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
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.
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
18
icons/cat.svg
Normal file
18
icons/cat.svg
Normal 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
14
icons/check-check.svg
Normal 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 |
18
icons/dog.svg
Normal file
18
icons/dog.svg
Normal 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 |
16
icons/heading-1.svg
Normal file
16
icons/heading-1.svg
Normal 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="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="m17 12 3-2v8" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 306 B |
16
icons/heading-2.svg
Normal file
16
icons/heading-2.svg
Normal 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="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 331 B |
17
icons/heading-3.svg
Normal file
17
icons/heading-3.svg
Normal 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="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2" />
|
||||
<path d="M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 393 B |
17
icons/heading-4.svg
Normal file
17
icons/heading-4.svg
Normal 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="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="M17 10v4h4" />
|
||||
<path d="M21 10v8" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 328 B |
17
icons/heading-5.svg
Normal file
17
icons/heading-5.svg
Normal 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="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="M17 13v-3h4" />
|
||||
<path d="M17 17.7c.4.2.8.3 1.3.3 1.5 0 2.7-1.1 2.7-2.5S19.8 13 18.3 13H17" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 385 B |
17
icons/heading-6.svg
Normal file
17
icons/heading-6.svg
Normal 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="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<circle cx="19" cy="16" r="2" />
|
||||
<path d="M20 10c-2 2-3 3.5-3 6" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 350 B |
15
icons/heading.svg
Normal file
15
icons/heading.svg
Normal 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 12h12" />
|
||||
<path d="M6 20V4" />
|
||||
<path d="M18 20V4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 279 B |
15
icons/spline.svg
Normal file
15
icons/spline.svg
Normal 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 |
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
....
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-angular",
|
||||
"description": "A Lucide icon library package for Angular applications",
|
||||
"version": "0.91.0",
|
||||
"version": "0.93.0",
|
||||
"author": "SMAH1",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
@@ -26,43 +26,43 @@
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
"clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
|
||||
"build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtention=.ts --exportFileName=index.ts",
|
||||
"build:ng": "ng build --prod",
|
||||
"build:ng": "ng build --configuration production",
|
||||
"test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
|
||||
"test:watch": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"postinstall": "ngcc",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
"declarationMap": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableIvy": false
|
||||
"enableIvy": true,
|
||||
"compilationMode": "partial"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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.91.0
|
||||
version: 0.93.0
|
||||
homepage: https://lucide.dev
|
||||
repository: https://github.com/lucide-icons/lucide
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-preact",
|
||||
"description": "A Lucide icon library package for Preact applications",
|
||||
"version": "0.91.0",
|
||||
"version": "0.93.0",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
|
||||
@@ -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
|
||||
```
|
||||
|
||||
@@ -25,11 +27,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-native';
|
||||
|
||||
const App = () => {
|
||||
return <Camera color="red" size={48}/>
|
||||
return <Camera color="red" size={48} />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -37,19 +39,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" />;
|
||||
};
|
||||
```
|
||||
|
||||
@@ -59,13 +61,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-native';
|
||||
|
||||
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;
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-react",
|
||||
"description": "A Lucide icon library package for React applications",
|
||||
"version": "0.91.0",
|
||||
"version": "0.93.0",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-svelte",
|
||||
"description": "A Lucide icon library package for Svelte applications",
|
||||
"version": "0.91.0",
|
||||
"version": "0.93.0",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lucide-vue-next",
|
||||
"version": "0.91.0",
|
||||
"version": "0.93.0",
|
||||
"author": "Eric Fennis",
|
||||
"description": "A Lucide icon library package for Vue 3 applications",
|
||||
"license": "ISC",
|
||||
|
||||
@@ -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" />
|
||||
```
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lucide-vue",
|
||||
"version": "0.91.0",
|
||||
"version": "0.93.0",
|
||||
"author": "Eric Fennis",
|
||||
"description": "A Lucide icon library package for Vue 2 applications",
|
||||
"license": "ISC",
|
||||
|
||||
@@ -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
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide",
|
||||
"description": "A Lucide icon library package for web and javascript applications.",
|
||||
"version": "0.91.0",
|
||||
"version": "0.93.0",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
|
||||
8464
pnpm-lock.yaml
generated
8464
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -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",
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
id="lucide-logo"
|
||||
>
|
||||
<path d="M14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 16.4183 9.58172 20 14 20C18.4183 20 22 16.4183 22 12C22 8.446 20.455 5.25285 18 3.05557" stroke="#2D3748" />
|
||||
<path d="M10 12C10 14.2091 11.7909 16 14 16C16.2091 16 18 14.2091 18 12C18 7.58172 14.4183 4 10 4C5.58172 4 2 7.58172 2 12C2 15.5841 3.57127 18.8012 6.06253 21" stroke="#F56565" />
|
||||
|
||||
|
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 590 B |
@@ -1,4 +1,9 @@
|
||||
<svg width="98" height="32" viewBox="0 0 98 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="98" height="32" rx="5" fill="white"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg height="24" width="82" y="4" x="8" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 242 B After Width: | Height: | Size: 2.8 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/angular.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 368 B |
@@ -1,6 +1,15 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/angular.svg" height="24" width="24" y="4" x="108"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0 0 3.57l1.53 13.22 8.47 4.7 8.47-4.7L20 3.57 10 0Z" fill="#DD0031"/>
|
||||
<path d="M10 0v21.48l8.47-4.7L20 3.58 10 0Z" fill="#C3002F"/>
|
||||
<path d="M10 2.37 3.75 16.4h2.33l1.26-3.14h5.3l1.26 3.14h2.33L10 2.37Zm1.83 8.95H8.17L10 6.92l1.83 4.4Z" fill="#fff"/>
|
||||
</svg>
|
||||
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 392 B After Width: | Height: | Size: 3.2 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/flutter.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 368 B |
15
site/public/package-logos/lucide-flutter.svg
Normal file
15
site/public/package-logos/lucide-flutter.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.15 9.23H10l-5.38 5.39 3.07 3.07 8.46-8.46Z" fill="#54C5F8"/>
|
||||
<path d="M3.08 13.08 0 10 10 0h6.15L3.08 13.08Z" fill="#54C5F8"/>
|
||||
<path d="M7.7 17.7 10 20h6.15l-5.38-5.38-3.08 3.07Z" fill="#01579B"/>
|
||||
<path d="m7.7 11.54-3.08 3.08 3.07 3.07 3.08-3.07-3.08-3.08Z" fill="#29B6F6"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/preact.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 367 B |
@@ -1,6 +1,15 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/preact.svg" height="24" width="24" y="4" x="108"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m10 0 10 5.77v11.55l-10 5.77-10-5.77V5.77L10 0Z" fill="#673AB8"/>
|
||||
<path d="M2.72 17.22c1.33 1.7 5.56.41 9.55-2.7 3.99-3.12 6.27-6.9 4.94-8.61-1.33-1.7-5.56-.4-9.55 2.71-3.99 3.12-6.27 6.9-4.94 8.6Zm.57-.44c-.44-.56-.25-1.67.6-3.07A17.8 17.8 0 0 1 8.1 9.2a17.8 17.8 0 0 1 5.41-3c1.56-.48 2.68-.4 3.12.16.44.57.25 1.68-.6 3.07a17.8 17.8 0 0 1-4.22 4.53 17.8 17.8 0 0 1-5.4 3c-1.57.48-2.69.4-3.13-.17Z" fill="#fff"/>
|
||||
<path d="M17.2 17.22c1.34-1.7-.94-5.48-4.93-8.6-4-3.12-8.22-4.41-9.55-2.71-1.33 1.7.95 5.49 4.94 8.6 4 3.12 8.22 4.42 9.55 2.71Zm-.56-.44c-.44.57-1.56.65-3.12.17a17.8 17.8 0 0 1-5.41-3 17.8 17.8 0 0 1-4.23-4.53c-.84-1.4-1.03-2.5-.59-3.07.44-.56 1.56-.64 3.12-.16a17.8 17.8 0 0 1 5.41 3 17.8 17.8 0 0 1 4.23 4.52c.84 1.4 1.03 2.5.59 3.07Z" fill="#fff"/>
|
||||
<path d="M9.96 13.1a1.53 1.53 0 1 0 0-3.06 1.53 1.53 0 0 0 0 3.06Z" fill="#fff"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 3.8 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/react-native.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 373 B |
@@ -1,6 +1,16 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/react-native.svg" height="24" width="24" y="4" x="108"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg" id="react-native-logo">
|
||||
<path d="M11.5 12.3a2 2 0 1 0 0-4.1 2 2 0 0 0 0 4Z" fill="#20232a"/>
|
||||
<path d="M11.5 14.4c6 0 11-1.8 11-4.2 0-2.3-5-4.2-11-4.2s-11 2-11 4.2c0 2.4 5 4.2 11 4.2Z" stroke="#20232a"/>
|
||||
<path d="M7.9 12.3c3 5.3 7 8.6 9.1 7.5 2-1.2 1.2-6.4-1.9-11.7C12.1 3 8.1-.5 6 .7 4 2 4.8 7.1 7.9 12.3Z" stroke="#20232a"/>
|
||||
<path d="M7.9 8.1c-3 5.3-4 10.5-1.9 11.7 2 1.1 6.1-2.2 9.1-7.5 3-5.2 4-10.4 1.9-11.6C15-.5 10.9 3 7.9 8.1Z" stroke="#20232a"/>
|
||||
</svg>
|
||||
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 397 B After Width: | Height: | Size: 3.4 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/react.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 366 B |
@@ -1,6 +1,15 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/react.svg" height="24" width="24" y="4" x="108"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg" id="react-logo">
|
||||
<path d="M11.5 12.3a2 2 0 1 0 0-4.1 2 2 0 0 0 0 4Z" fill="#61DAFB"/>
|
||||
<path d="M11.5 14.4c6 0 11-1.8 11-4.2 0-2.3-5-4.2-11-4.2s-11 2-11 4.2c0 2.4 5 4.2 11 4.2Z" stroke="#61DAFB"/>
|
||||
<path d="M7.9 12.3c3 5.3 7 8.6 9.1 7.5 2-1.2 1.2-6.4-1.9-11.7C12.1 3 8.1-.5 6 .7 4 2 4.8 7.1 7.9 12.3Z" stroke="#61DAFB"/>
|
||||
<path d="M7.9 8.1c-3 5.3-4 10.5-1.9 11.7 2 1.1 6.1-2.2 9.1-7.5 3-5.2 4-10.4 1.9-11.6C15-.5 10.9 3 7.9 8.1Z" stroke="#61DAFB"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 390 B After Width: | Height: | Size: 3.4 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/js.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 363 B |
44
site/public/package-logos/lucide-solid.svg
Normal file
44
site/public/package-logos/lucide-solid.svg
Normal file
@@ -0,0 +1,44 @@
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg" id="solid-logo">
|
||||
<g clip-path="url(#a)">
|
||||
<path d="M31.42 6.75S21.2-.77 13.3.96l-.58.2a5.48 5.48 0 0 0-2.7 1.73l-.38.58-2.9 5.01 5.02.97c2.12 1.35 4.82 1.92 7.32 1.35l8.87 1.73 3.47-5.78Z" fill="#76B3E1"/>
|
||||
<path opacity=".3" d="M31.42 6.75S21.2-.77 13.3.96l-.58.2a5.48 5.48 0 0 0-2.7 1.73l-.38.58-2.9 5.01 5.02.97c2.12 1.35 4.82 1.92 7.32 1.35l8.87 1.73 3.47-5.78Z" fill="url(#b)"/>
|
||||
<path d="m10.02 6.75-.77.19c-3.27.96-4.24 4.05-2.5 6.75 1.92 2.5 5.97 3.85 9.25 2.89l11.95-4.05S17.73 5.01 10.02 6.75Z" fill="#518AC8"/>
|
||||
<path opacity=".3" d="m10.02 6.75-.77.19c-3.27.96-4.24 4.05-2.5 6.75 1.92 2.5 5.97 3.85 9.25 2.89l11.95-4.05S17.73 5.01 10.02 6.75Z" fill="url(#c)"/>
|
||||
<path d="M25.83 15.42a8.67 8.67 0 0 0-9.25-2.89L4.63 16.39.77 23.13l21.6 3.67 3.85-6.94c.77-1.35.58-2.9-.39-4.44Z" fill="url(#d)"/>
|
||||
<path d="M21.98 22.17a8.67 8.67 0 0 0-9.26-2.9L.77 23.14S11 30.84 18.9 28.92l.58-.2c3.28-.96 4.43-4.05 2.5-6.55Z" fill="url(#e)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="b" x1="5.3" y1=".58" x2="29.3" y2="12.24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset=".1" stop-color="#76B3E1"/>
|
||||
<stop offset=".3" stop-color="#DCF2FD"/>
|
||||
<stop offset="1" stop-color="#76B3E1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="c" x1="18.47" y1="6.28" x2="14.27" y2="20.28" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#76B3E1"/>
|
||||
<stop offset=".5" stop-color="#4377BB"/>
|
||||
<stop offset="1" stop-color="#1F3B77"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="d" x1="3.55" y1="12.38" x2="27.82" y2="28.88" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#315AA9"/>
|
||||
<stop offset=".5" stop-color="#518AC8"/>
|
||||
<stop offset="1" stop-color="#315AA9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="e" x1="14.5" y1="14.36" x2="4.7" y2="50.27" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4377BB"/>
|
||||
<stop offset=".5" stop-color="#1A336B"/>
|
||||
<stop offset="1" stop-color="#1A336B"/>
|
||||
</linearGradient>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h32v29.94H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/svg.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 364 B |
@@ -1,6 +1,16 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/svg.svg" height="24" width="24" y="4" x="108"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="svg-logo">
|
||||
<path d="M.68 12h22.64v8A3.26 3.26 0 0 1 20 23.32H4A3.26 3.26 0 0 1 .68 20v-8Z" fill="#000"/>
|
||||
<path d="M13.27 4.87a1.8 1.8 0 1 0-2.54 0v3.66L8.14 5.94a1.8 1.8 0 1 0-1.8 1.8l2.59 2.59H5.27a1.8 1.8 0 1 0 0 2.54h3.66l-2.58 2.58a1.8 1.8 0 1 0 1.8 1.8l2.58-2.58v3.65a1.8 1.8 0 1 0 2.54 0v-3.65l2.58 2.58a1.8 1.8 0 1 0 1.8-1.8l-2.58-2.58h3.65a1.8 1.8 0 1 0 0-2.54h-3.65l2.59-2.59a1.8 1.8 0 1 0-1.8-1.8l-2.59 2.59V4.87Z" fill="#FFB13B"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.73 4.87a1.8 1.8 0 1 1 2.54 0v3.66l2.59-2.59a1.8 1.8 0 1 1 1.8 1.8l-2.59 2.59h3.65a1.8 1.8 0 1 1 0 2.54h-3.65l2.58 2.58a1.8 1.8 0 1 1-1.8 1.8l-2.58-2.58v3.65a1.8 1.8 0 1 1-2.54 0v-3.65l-2.58 2.58a1.8 1.8 0 1 1-1.8-1.8l2.58-2.58H5.27a1.8 1.8 0 1 1 0-2.54h3.66L6.34 7.74a1.8 1.8 0 1 1 1.8-1.8l2.59 2.59V4.87ZM8.69 3.6A3.31 3.31 0 0 0 4 8.3a3.31 3.31 0 0 0 0 6.62A3.31 3.31 0 0 0 8.7 19.6a3.31 3.31 0 0 0 6.62 0A3.31 3.31 0 0 0 20 14.9a3.31 3.31 0 0 0 0-6.62A3.31 3.31 0 0 0 15.3 3.6a3.31 3.31 0 0 0-6.62 0Z" fill="#000"/>
|
||||
<path opacity=".8" d="M.68 12h22.64v8A3.26 3.26 0 0 1 20 23.32H4A3.26 3.26 0 0 1 .68 20v-8Z" fill="#000"/>
|
||||
<path d="M4.08 17.65a2.93 2.93 0 0 1 2.08-5.01c1.6 0 2.93 1.31 2.93 2.94H7.36a1.22 1.22 0 1 0-2.08.85c.22.23.42.29.86.37a3.3 3.3 0 0 1 2.08.85 2.93 2.93 0 0 1-2.08 5 2.93 2.93 0 0 1-2.92-2.92h1.74a1.22 1.22 0 1 0 2.08-.87c-.24-.22-.54-.28-.88-.35-.78-.13-1.54-.32-2.08-.86Zm10.88-5.01-2.08 10.02h-1.73L9.07 12.64h1.73l1.22 5.87 1.21-5.87h1.73Zm2.93 4.16h2.91v2.93a2.93 2.93 0 1 1-5.86 0v-4.16a2.93 2.93 0 1 1 5.86 0h-1.7a1.22 1.22 0 0 0-2.43 0v4.16a1.22 1.22 0 0 0 2.43 0V18.5H17.9V16.8Z" fill="#fff"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 388 B After Width: | Height: | Size: 4.6 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/svelte.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 367 B |
@@ -1,6 +1,13 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/svelte.svg" height="24" width="24" y="4" x="108"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 20 25" fill="none" xmlns="http://www.w3.org/2000/svg" id="svelte-logo">
|
||||
<path d="M18.7 3.2A7.3 7.3 0 0 0 9 1L3.3 4.6A6.4 6.4 0 0 0 .4 9c-.3 1.5 0 3 .7 4.4a6.4 6.4 0 0 0-1 5c.3 1 .6 1.8 1.2 2.5A7.3 7.3 0 0 0 11 23l5.6-3.6a6.4 6.4 0 0 0 2.9-4.3c.3-1.5 0-3-.7-4.3a6.5 6.5 0 0 0 1-5.1c-.3-1-.6-1.8-1.2-2.5" fill="#FF3E00"/>
|
||||
<path d="M8.4 21.2a4.4 4.4 0 0 1-5.5-3.3 4.1 4.1 0 0 1 .1-2.1l.1-.4.3.2c.7.5 1.4.9 2.2 1.1l.2.1v.2c0 .3 0 .6.2.8a1.3 1.3 0 0 0 1.5.6l.3-.2 5.6-3.5a1.2 1.2 0 0 0 .5-1.3l-.2-.5a1.3 1.3 0 0 0-1.4-.5c-.2 0-.3 0-.4.2l-2.1 1.3-1.2.5a4.4 4.4 0 0 1-5.4-3.2A4.1 4.1 0 0 1 3.8 8c.3-.5.7-.9 1.1-1.2l5.6-3.5a4 4 0 0 1 1.1-.5A4.4 4.4 0 0 1 17.1 6a4.1 4.1 0 0 1-.1 2.2l-.1.3-.3-.2c-.7-.5-1.4-.9-2.2-1.1h-.2V7c0-.3 0-.6-.2-.8a1.3 1.3 0 0 0-1.8-.4L6.6 9.4a1.2 1.2 0 0 0-.5 1.3l.2.4a1.3 1.3 0 0 0 1.4.5l.4-.1 2.1-1.4a4 4 0 0 1 1.2-.5 4.4 4.4 0 0 1 5.4 3.3c.1.5.1 1 0 1.6a3.9 3.9 0 0 1-1.7 2.6l-5.6 3.6-1.1.5" fill="#fff"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 3.8 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/vue-next.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 369 B |
@@ -1,6 +1,15 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/vue-next.svg" height="24" width="24" y="4" x="108"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg" id="vue-next-logo">
|
||||
<path d="m14.2 0-2.7 4.6L9 0H0l11.5 20L23.1 0h-8.9Z" fill="#41B883"/>
|
||||
<path d="m14.2 0-2.7 4.6L9 0H4.6l7 12 6.9-12h-4.3Z" fill="#34495E"/>
|
||||
<circle cx="16.5" cy="13.5" r="4.5" fill="#2C3E50"/>
|
||||
<path d="m15.5 11.8.4-.2.5-.1a1.3 1.3 0 0 1 .9.3l.2.3v.4l-.1.5a1 1 0 0 1-.4.3c.2 0 .3.2.5.3l.2.6a1 1 0 0 1-.4.8l-.4.2a2.6 2.6 0 0 1-1 0l-.5-.1.1-.4h.4a1.6 1.6 0 0 0 .7 0h.2l.2-.2v-.3l-.1-.4a1 1 0 0 0-.6-.2h-.4v-.5h.3l.5-.1c.2-.1.3-.3.3-.5l-.2-.4a.6.6 0 0 0-.4-.1 1 1 0 0 0-.4 0l-.3.2-.2-.4Z" fill="#fff"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 393 B After Width: | Height: | Size: 3.5 KiB |
@@ -1,6 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/vue.svg" height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 364 B |
@@ -1,6 +1,14 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/vue.svg" height="24" width="24" y="4" x="108"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg" id="vue-logo">
|
||||
<path d="m14.2 0-2.7 4.6L9 0H0l11.5 20L23.1 0h-8.9Z" fill="#41B883"/>
|
||||
<path d="m14.2 0-2.7 4.6L9 0H4.6l7 12 6.9-12h-4.3Z" fill="#34495E"/>
|
||||
</svg>
|
||||
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 388 B After Width: | Height: | Size: 3.1 KiB |
@@ -1,6 +1,13 @@
|
||||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="140" height="32" rx="5" fill="#fff"/>
|
||||
<image href="https://lucide.dev/logo-text.svg" height="24" width="82" y="4" x="8"/>
|
||||
<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg" y="4" x="8">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<circle cx="99" cy="16" r="2" fill="#DDD"/>
|
||||
<image href="https://lucide.dev/framework-logos/js.svg" height="24" width="24" y="4" x="108"/>
|
||||
<svg height="24" width="24" y="4" x="108" viewBox="-2 -2 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="javascript-logo">
|
||||
<path d="M0 0h20v20H0V0Z" fill="#F7DF1E"/>
|
||||
<path d="M13.43 15.62c.41.67.92 1.14 1.87 1.14.76 0 1.27-.38 1.27-.92 0-.63-.5-.89-1.36-1.24l-.48-.22c-1.37-.57-2.25-1.3-2.25-2.82 0-1.4 1.08-2.48 2.73-2.48 1.2 0 2.06.41 2.7 1.5l-1.47.94c-.34-.57-.7-.79-1.23-.79-.54 0-.9.35-.9.8 0 .57.36.79 1.18 1.14l.45.19c1.62.7 2.5 1.4 2.5 2.95 0 1.68-1.33 2.63-3.1 2.63-1.75 0-2.9-.85-3.44-1.93l1.53-.9Zm-6.64.16c.29.54.58.98 1.21.98s1.02-.25 1.02-1.17V9.17h1.87v6.42c0 1.97-1.14 2.85-2.8 2.85a2.9 2.9 0 0 1-2.82-1.74l1.52-.92Z" fill="#000"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 387 B After Width: | Height: | Size: 3.5 KiB |
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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[];
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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[];
|
||||
|
||||
@@ -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 }} />;
|
||||
});
|
||||
|
||||
@@ -7,7 +7,6 @@ import {
|
||||
useColorMode,
|
||||
ButtonGroup,
|
||||
} from '@chakra-ui/react';
|
||||
import Image from 'next/image';
|
||||
import { Code, FileText } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
@@ -19,17 +18,17 @@ interface Shield {
|
||||
export interface PackageItem {
|
||||
name: string
|
||||
description: string
|
||||
image: string
|
||||
icon: string
|
||||
shields: Shield[]
|
||||
source: string
|
||||
documentation: string
|
||||
order: number
|
||||
order?: number
|
||||
private?: boolean
|
||||
flutter?: object
|
||||
}
|
||||
|
||||
|
||||
const Package = ({ name, description, image, shields, source, documentation }: PackageItem) => {
|
||||
const Package = ({ name, description, icon, shields, source, documentation }: PackageItem) => {
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
return (
|
||||
@@ -66,7 +65,12 @@ const Package = ({ name, description, image, shields, source, documentation }: P
|
||||
align="center"
|
||||
>
|
||||
<Box marginX="auto">
|
||||
<Image width={278} height={120} src={image} />
|
||||
<svg viewBox="0 0 78 32" width={278} height={120} fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<image href="/logo-icon.svg" height="24" width="24" y="4" x="8"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<image href={icon} height="24" width="24" y="4" x="47"/>
|
||||
</svg>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Box
|
||||
@@ -83,7 +87,7 @@ const Package = ({ name, description, image, shields, source, documentation }: P
|
||||
<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} />
|
||||
|
||||
89
site/src/data/packageData.json
Normal file
89
site/src/data/packageData.json
Normal file
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"lucide": {
|
||||
"order": 0,
|
||||
"icon": "js",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide", "href": "https://www.npmjs.com/package/lucide" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide", "href": "https://www.npmjs.com/package/lucide" }
|
||||
]
|
||||
},
|
||||
"lucide-react": {
|
||||
"order": 1,
|
||||
"icon": "react",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-react", "href": "https://www.npmjs.com/package/lucide-react" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-react", "href": "https://www.npmjs.com/package/lucide-react" }
|
||||
]
|
||||
},
|
||||
"lucide-vue": {
|
||||
"order": 2,
|
||||
"icon": "vue",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-vue", "href": "https://www.npmjs.com/package/lucide-vue" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-vue", "href": "https://www.npmjs.com/package/lucide-vue" }
|
||||
]
|
||||
},
|
||||
"lucide-vue-next": {
|
||||
"order": 3,
|
||||
"icon": "vue-next",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-vue-next", "href": "https://www.npmjs.com/package/lucide-vue-next" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-vue-next", "href": "https://www.npmjs.com/package/lucide-vue-next" }
|
||||
]
|
||||
},
|
||||
"lucide-svelte": {
|
||||
"order": 4,
|
||||
"icon": "svelte",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-svelte", "href": "https://www.npmjs.com/package/lucide-svelte" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-svelte", "href": "https://www.npmjs.com/package/lucide-svelte" }
|
||||
]
|
||||
},
|
||||
"lucide-solid": {
|
||||
"order": 4,
|
||||
"icon": "solid",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-solid", "href": "https://www.npmjs.com/package/lucide-solid" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-solid", "href": "https://www.npmjs.com/package/lucide-solid" }
|
||||
]
|
||||
},
|
||||
"lucide-preact": {
|
||||
"order": 5,
|
||||
"icon": "preact",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-preact", "href": "https://www.npmjs.com/package/lucide-preact" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-preact", "href": "https://www.npmjs.com/package/lucide-preact" }
|
||||
]
|
||||
},
|
||||
"lucide-react-native": {
|
||||
"order": 6,
|
||||
"icon": "react-native",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-react-native", "href": "https://www.npmjs.com/package/lucide-react-native" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-react-native", "href": "https://www.npmjs.com/package/lucide-react-native" }
|
||||
]
|
||||
},
|
||||
"lucide-angular": {
|
||||
"order": 7,
|
||||
"icon": "angular",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-angular", "href": "https://www.npmjs.com/package/lucide-angular" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-angular", "href": "https://www.npmjs.com/package/lucide-angular" }
|
||||
]
|
||||
},
|
||||
"lucide-static": {
|
||||
"order": 8,
|
||||
"icon": "svg",
|
||||
"shields": [
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-static", "href": "https://www.npmjs.com/package/lucide-static" },
|
||||
{ "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-static", "href": "https://www.npmjs.com/package/lucide-static" }
|
||||
]
|
||||
},
|
||||
"lucide-flutter": {
|
||||
"order": 9,
|
||||
"icon": "flutter",
|
||||
"shields": [
|
||||
{ "alt": "flutter", "src": "https://img.shields.io/pub/v/lucide_icons", "href": "https://img.shields.io/pub/v/lucide_icons" }
|
||||
]
|
||||
}
|
||||
}
|
||||
13
site/src/data/packageData.thirdParty.json
Normal file
13
site/src/data/packageData.thirdParty.json
Normal file
@@ -0,0 +1,13 @@
|
||||
[
|
||||
{
|
||||
"name": "blade-lucide-icons",
|
||||
"description": "Implementation of Lucide icon's using blade-icons for Laravel based projects.",
|
||||
"icon": "/framework-logos/laravel.svg",
|
||||
"shields": [
|
||||
{ "alt": "Latest Stable Version", "src": "https://img.shields.io/packagist/v/mallardduck/blade-lucide-icons", "href": "https://packagist.org/packages/mallardduck/blade-lucide-icons" },
|
||||
{ "alt": "Total Downloads", "src": "https://img.shields.io/packagist/dt/mallardduck/blade-lucide-icons", "href": "https://packagist.org/packages/mallardduck/blade-lucide-icons" }
|
||||
],
|
||||
"source": "https://github.com/mallardduck/blade-lucide-icons",
|
||||
"documentation": "https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md"
|
||||
}
|
||||
]
|
||||
@@ -1,64 +0,0 @@
|
||||
export default {
|
||||
lucide: {
|
||||
order: 0,
|
||||
shields: [
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/v/lucide', href: "https://www.npmjs.com/package/lucide" },
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide', href: "https://www.npmjs.com/package/lucide" }
|
||||
]
|
||||
},
|
||||
'lucide-react': {
|
||||
order: 1,
|
||||
shields: [
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-react', href: "https://www.npmjs.com/package/lucide-react" },
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-react', href: "https://www.npmjs.com/package/lucide-react" }
|
||||
]
|
||||
},
|
||||
'lucide-vue': {
|
||||
order: 2,
|
||||
shields: [
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-vue', href: "https://www.npmjs.com/package/lucide-vue" },
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-vue', href: "https://www.npmjs.com/package/lucide-vue" }
|
||||
]
|
||||
},
|
||||
'lucide-vue-next': {
|
||||
order: 3,
|
||||
shields: [
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-vue-next', href: "https://www.npmjs.com/package/lucide-vue-next" },
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-vue-next', href: "https://www.npmjs.com/package/lucide-vue-next" }
|
||||
]
|
||||
},
|
||||
'lucide-svelte': {
|
||||
order: 4,
|
||||
shields: [
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-svelte', href: "https://www.npmjs.com/package/lucide-svelte" },
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-svelte', href: "https://www.npmjs.com/package/lucide-svelte" }
|
||||
]
|
||||
},
|
||||
'lucide-preact': {
|
||||
order: 5,
|
||||
shields: [
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-preact', href: "https://www.npmjs.com/package/lucide-preact" },
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-preact', href: "https://www.npmjs.com/package/lucide-preact" }
|
||||
]
|
||||
},
|
||||
'lucide-angular': {
|
||||
order: 6,
|
||||
shields: [
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-angular', href: "https://www.npmjs.com/package/lucide-angular" },
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-angular', href: "https://www.npmjs.com/package/lucide-angular" }
|
||||
]
|
||||
},
|
||||
'lucide-static': {
|
||||
order: 7,
|
||||
shields: [
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-static', href: "https://www.npmjs.com/package/lucide-static" },
|
||||
{ alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-static', href: "https://www.npmjs.com/package/lucide-static" }
|
||||
]
|
||||
},
|
||||
'lucide-flutter': {
|
||||
order: 8,
|
||||
shields: [
|
||||
{ alt: 'flutter', src: 'https://img.shields.io/pub/v/lucide_icons', href: "https://pub.dev/packages/lucide_icons" },
|
||||
]
|
||||
}
|
||||
};
|
||||
@@ -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'
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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)));
|
||||
|
||||
@@ -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 }) => {
|
||||
|
||||
@@ -3,16 +3,18 @@ import HeadingNavigationProvider from '../../components/HeadingNavigationProvide
|
||||
import MobileMenu from '../../components/MobileMenu';
|
||||
import { Stack } from '@chakra-ui/react';
|
||||
import Package, { PackageItem } from '../../components/Package';
|
||||
import packagesData from '../../data/packageData';
|
||||
import packagesData from '../../data/packageData.json';
|
||||
import thirdPartyPackagesData from '../../data/packageData.thirdParty.json';
|
||||
import { Heading } from '@chakra-ui/react';
|
||||
import fetchPackages from '../../lib/fetchPackages';
|
||||
import { GetStaticPropsResult } from 'next';
|
||||
|
||||
interface PackagesPageProps {
|
||||
packages: PackageItem[]
|
||||
thirdPartyPackages: PackageItem[]
|
||||
}
|
||||
|
||||
const PackagesPage = ({ packages }: PackagesPageProps): JSX.Element => {
|
||||
const PackagesPage = ({ packages, thirdPartyPackages }: PackagesPageProps): JSX.Element => {
|
||||
return (
|
||||
<HeadingNavigationProvider>
|
||||
<MobileMenu />
|
||||
@@ -21,7 +23,18 @@ const PackagesPage = ({ packages }: PackagesPageProps): JSX.Element => {
|
||||
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 key={packageItem.name} {...packageItem} />))
|
||||
: null}
|
||||
</Stack>
|
||||
</Layout>
|
||||
</HeadingNavigationProvider>
|
||||
@@ -40,16 +53,13 @@ export async function getStaticProps(): Promise<GetStaticPropsResult<PackagesPag
|
||||
return {
|
||||
name,
|
||||
description,
|
||||
image: `/package-logos/${packageDirectory}-small.svg`,
|
||||
source: `https://github.com/lucide-icons/lucide/tree/main/packages/${packageDirectory}`,
|
||||
documentation: `/docs/${packageDirectory}`,
|
||||
...packagesData[packageDirectory],
|
||||
icon: `/framework-logos/${packagesData[packageDirectory].icon}.svg`,
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a.order - b.order);
|
||||
|
||||
console.log(packages);
|
||||
|
||||
|
||||
return { props: { packages } };
|
||||
return { props: { packages, thirdPartyPackages: thirdPartyPackagesData } };
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
116
tags.json
116
tags.json
@@ -763,9 +763,20 @@
|
||||
"chromecast",
|
||||
"airplay"
|
||||
],
|
||||
"cat": [
|
||||
"animal",
|
||||
"pet",
|
||||
"kitten",
|
||||
"feline"
|
||||
],
|
||||
"check": [
|
||||
"done"
|
||||
],
|
||||
"check-check": [
|
||||
"done",
|
||||
"received",
|
||||
"double"
|
||||
],
|
||||
"check-circle": [
|
||||
"done"
|
||||
],
|
||||
@@ -845,7 +856,8 @@
|
||||
"vertical"
|
||||
],
|
||||
"chrome": [
|
||||
"browser"
|
||||
"browser",
|
||||
"logo"
|
||||
],
|
||||
"cigarette": [
|
||||
"smoking"
|
||||
@@ -857,7 +869,8 @@
|
||||
"circle": [
|
||||
"off",
|
||||
"zero",
|
||||
"record"
|
||||
"record",
|
||||
"shape"
|
||||
],
|
||||
"circle-dot": [
|
||||
"pending",
|
||||
@@ -875,7 +888,8 @@
|
||||
"zero",
|
||||
"Ø",
|
||||
"null",
|
||||
"nothing"
|
||||
"nothing",
|
||||
"maths"
|
||||
],
|
||||
"citrus": [
|
||||
"lemon",
|
||||
@@ -1239,7 +1253,8 @@
|
||||
"square",
|
||||
"rectangle",
|
||||
"oblique",
|
||||
"rhombus"
|
||||
"rhombus",
|
||||
"shape"
|
||||
],
|
||||
"dice-1": [
|
||||
"dice",
|
||||
@@ -1301,7 +1316,8 @@
|
||||
"difference",
|
||||
"plus",
|
||||
"minus",
|
||||
"plus-minus"
|
||||
"plus-minus",
|
||||
"maths"
|
||||
],
|
||||
"disc": [
|
||||
"album",
|
||||
@@ -1310,13 +1326,23 @@
|
||||
"music"
|
||||
],
|
||||
"divide": [
|
||||
"calculate"
|
||||
"calculate",
|
||||
"maths"
|
||||
],
|
||||
"divide-circle": [
|
||||
"calculate"
|
||||
"calculate",
|
||||
"maths"
|
||||
],
|
||||
"divide-square": [
|
||||
"calculate"
|
||||
"calculate",
|
||||
"maths"
|
||||
],
|
||||
"dog": [
|
||||
"animal",
|
||||
"pet",
|
||||
"puppy",
|
||||
"hound",
|
||||
"canine"
|
||||
],
|
||||
"dollar-sign": [
|
||||
"currency",
|
||||
@@ -1379,11 +1405,13 @@
|
||||
"breakfast"
|
||||
],
|
||||
"equal": [
|
||||
"calculate"
|
||||
"calculate",
|
||||
"maths"
|
||||
],
|
||||
"equal-not": [
|
||||
"calculate",
|
||||
"off"
|
||||
"off",
|
||||
"maths"
|
||||
],
|
||||
"eraser": [
|
||||
"pencil",
|
||||
@@ -1996,7 +2024,8 @@
|
||||
"function-square": [
|
||||
"programming",
|
||||
"code",
|
||||
"automation"
|
||||
"automation",
|
||||
"maths"
|
||||
],
|
||||
"joystick": [
|
||||
"game",
|
||||
@@ -2272,7 +2301,8 @@
|
||||
"infinity": [
|
||||
"unlimited",
|
||||
"forever",
|
||||
"loop"
|
||||
"loop",
|
||||
"maths"
|
||||
],
|
||||
"info": [
|
||||
"help"
|
||||
@@ -2287,6 +2317,7 @@
|
||||
],
|
||||
"instagram": [
|
||||
"logo",
|
||||
"social",
|
||||
"camera"
|
||||
],
|
||||
"italic": [
|
||||
@@ -2451,7 +2482,7 @@
|
||||
],
|
||||
"linkedin": [
|
||||
"logo",
|
||||
"social media"
|
||||
"social"
|
||||
],
|
||||
"list": [
|
||||
"options"
|
||||
@@ -2771,15 +2802,18 @@
|
||||
],
|
||||
"minus": [
|
||||
"subtract",
|
||||
"calculate"
|
||||
"calculate",
|
||||
"maths"
|
||||
],
|
||||
"minus-circle": [
|
||||
"subtract",
|
||||
"calculate"
|
||||
"calculate",
|
||||
"maths"
|
||||
],
|
||||
"minus-square": [
|
||||
"subtract",
|
||||
"calculate"
|
||||
"calculate",
|
||||
"maths"
|
||||
],
|
||||
"monitor": [
|
||||
"tv",
|
||||
@@ -2915,7 +2949,8 @@
|
||||
"headline"
|
||||
],
|
||||
"octagon": [
|
||||
"stop"
|
||||
"stop",
|
||||
"shape"
|
||||
],
|
||||
"option": [
|
||||
"key",
|
||||
@@ -3103,15 +3138,18 @@
|
||||
],
|
||||
"plus": [
|
||||
"add",
|
||||
"new"
|
||||
"new",
|
||||
"maths"
|
||||
],
|
||||
"plus-circle": [
|
||||
"add",
|
||||
"new"
|
||||
"new",
|
||||
"maths"
|
||||
],
|
||||
"plus-square": [
|
||||
"add",
|
||||
"new"
|
||||
"new",
|
||||
"maths"
|
||||
],
|
||||
"pocket": [
|
||||
"logo",
|
||||
@@ -3169,13 +3207,15 @@
|
||||
"rectangle",
|
||||
"aspect ratio",
|
||||
"16:9",
|
||||
"horizontal"
|
||||
"horizontal",
|
||||
"shape"
|
||||
],
|
||||
"rectangle-vertical": [
|
||||
"rectangle",
|
||||
"aspect ratio",
|
||||
"9:16",
|
||||
"vertical"
|
||||
"vertical",
|
||||
"shape"
|
||||
],
|
||||
"recycle": [
|
||||
"sustainability",
|
||||
@@ -3211,7 +3251,8 @@
|
||||
],
|
||||
"regex": [
|
||||
"search",
|
||||
"text"
|
||||
"text",
|
||||
"code"
|
||||
],
|
||||
"repeat": [
|
||||
"loop",
|
||||
@@ -3479,7 +3520,8 @@
|
||||
],
|
||||
"sigma": [
|
||||
"sum",
|
||||
"calculate"
|
||||
"calculate",
|
||||
"maths"
|
||||
],
|
||||
"signal": [
|
||||
"connection",
|
||||
@@ -3644,7 +3686,8 @@
|
||||
"square": [
|
||||
"rectangle",
|
||||
"aspect ratio",
|
||||
"1:1"
|
||||
"1:1",
|
||||
"shape"
|
||||
],
|
||||
"star": [
|
||||
"bookmark",
|
||||
@@ -3958,7 +4001,9 @@
|
||||
"park",
|
||||
"nature"
|
||||
],
|
||||
"trello": [],
|
||||
"trello": [
|
||||
"logo"
|
||||
],
|
||||
"trending-down": [
|
||||
"statistics"
|
||||
],
|
||||
@@ -3966,7 +4011,8 @@
|
||||
"statistics"
|
||||
],
|
||||
"triangle": [
|
||||
"delta"
|
||||
"delta",
|
||||
"shape"
|
||||
],
|
||||
"trophy": [
|
||||
"prize",
|
||||
@@ -3993,7 +4039,8 @@
|
||||
"display"
|
||||
],
|
||||
"twitch": [
|
||||
"logo"
|
||||
"logo",
|
||||
"social"
|
||||
],
|
||||
"twitter": [
|
||||
"logo",
|
||||
@@ -4237,7 +4284,8 @@
|
||||
"delete",
|
||||
"remove",
|
||||
"times",
|
||||
"clear"
|
||||
"clear",
|
||||
"maths"
|
||||
],
|
||||
"x-circle": [
|
||||
"cancel",
|
||||
@@ -4245,7 +4293,8 @@
|
||||
"delete",
|
||||
"remove",
|
||||
"times",
|
||||
"clear"
|
||||
"clear",
|
||||
"maths"
|
||||
],
|
||||
"x-octagon": [
|
||||
"delete",
|
||||
@@ -4253,7 +4302,8 @@
|
||||
"alert",
|
||||
"warning",
|
||||
"times",
|
||||
"clear"
|
||||
"clear",
|
||||
"maths"
|
||||
],
|
||||
"x-square": [
|
||||
"cancel",
|
||||
@@ -4261,10 +4311,12 @@
|
||||
"delete",
|
||||
"remove",
|
||||
"times",
|
||||
"clear"
|
||||
"clear",
|
||||
"maths"
|
||||
],
|
||||
"youtube": [
|
||||
"logo",
|
||||
"social",
|
||||
"video",
|
||||
"play"
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user