Skip to content

Commit

Permalink
Merge branch 'main' into studio/key-refresh
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericfennis
ericfennis authored Nov 29, 2024
2 parents 3a03f73 + 4f038d5 commit d66775d
Show file tree
Hide file tree
Showing 84 changed files with 1,625 additions and 689 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/close-issue-with-banned-phrases.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ jobs:
- name: Check for blocked phrases in issue title
run: |
ISSUE_TITLE=$(jq -r '.issue.title' "$GITHUB_EVENT_PATH")
BLOCKED_PHRASES=("twitter" "whatsapp" "logo" "google" "tiktok" "facebook" "slack" "discord")
BLOCKED_PHRASES=("twitter" "whatsapp" "logo" "google" "tiktok" "facebook" "slack" "discord" "bluesky")
# Check title and body for blocked phrases
for PHRASE in "${BLOCKED_PHRASES[@]}"
Expand Down
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ When adding new features to for example the icon component for a framework. It i

### Local Testing

To test changes in a local project, you can use `yarn link`, `npm link` or `pnpm link` to link the package. Before you do this make sure you builded the package first.
To test changes in a local project, you can use `yarn link`, `npm link`, `bun link` or `pnpm link` to link the package. Before you do this make sure you builded the package first.

```sh
# in packages/lucide-react
Expand Down
261 changes: 27 additions & 234 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,185 +8,39 @@
</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://www.figma.com/community/plugin/939567362549682242/Lucide-Icons"><img src="https://img.shields.io/badge/Figma-F24E1E?logo=figma&logoColor=white" 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>
<p align="center">
<a href="https://lucide.dev/icons/">Icons</a>
·
<a href="https://lucide.dev/guide/">Guide</a>
·
<a href="https://lucide.dev/packages">Packages</a>
·
<a href="https://lucide.dev/license">License</a>
·
<a href="https://lucide.dev/showcase">Showcase</a>
</p>

# Lucide

Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.

It began after growing dissatisfaction 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.

Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!

### Why choose Lucide over Feather Icons

- More icons to work with: Lucide already has hundreds of icons more than Feather does.
- Official libraries and integrations with popular frameworks and design tools.
- Well maintained code base.
- Active community, regularly growing and improving the set.

## 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)
- [Svelte](#svelte)
- [Solid](#solid)
- [Hyva](#hyva)
- [Eleventy](#eleventy)
- [Contributing](#contributing)
- [Community](#community)
- [License](#license)
- [Credits](#credits)
- [Sponsors](#sponsors)

## Usage

At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)

The following are additional ways you can use Lucide.
With the Javascript library you can easily incorporate the icon you want in your webpage.

### Web

Implementation of the lucide icon library for web applications.

```sh
npm install lucide
```

or

```sh
yarn add lucide
```

For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide#lucide).

### React

Implementation of the lucide icon library for react applications.

```sh
yarn add lucide-react
```

or

```sh
npm install lucide-react
```

For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react#lucide-react).

### React Native

Implementation of the lucide icon library for React Native applications.

```sh
yarn add lucide-react-native
```

or

```sh
npm install 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

Implementation of the lucide icon library for vue applications.

```sh
yarn add lucide-vue
```

or

```sh
npm install lucide-vue
```

For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue).

### Vue 3

Implementation of the lucide icon library for vue applications.

```sh
yarn add lucide-vue-next
```

or

```sh
npm install lucide-vue-next
```
Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](https://lucide.dev/packages) to make it easier to use these icons in your project.

For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next#lucide-vue-next).
## Packages

### Angular

```sh
yarn add lucide-angular
```

or

```sh
npm install lucide-angular
```

For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-angular#lucide-angular).

### Preact

Implementation of the lucide icon library for preact applications.

```sh
yarn add lucide-preact
```

or

```sh
npm install lucide-preact
```

For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-preact#lucide-preact).

### Static (svg sprite, font, icons ..)

Assets:
[Font Files](https://github.com/lucide-icons/lucide/releases/latest)
[SVG Files](https://github.com/lucide-icons/lucide/releases/latest)
[SVG Sprite](https://cdn.jsdelivr.net/npm/lucide-static@latest/sprite.svg)

NPM package

```sh
yarn add lucide-static
```

or

```sh
npm install lucide-static
```
| | Package | Version & Downloads | Links |
| --- | --- | --- | --- |
| <img src="https://lucide.dev/framework-logos/js.svg" alt="JS logo" width="48"> | `lucide` | [![npm](https://img.shields.io/npm/v/lucide)](https://www.npmjs.com/package/lucide) ![NPM Downloads](https://img.shields.io/npm/dw/lucide) | [Docs](https://lucide.dev/guide/packages/lucide) [Source](./packages/lucide) |
| <img src="https://lucide.dev/framework-logos/react.svg" alt="React logo" width="48"> | `lucide-react` | [![npm](https://img.shields.io/npm/v/lucide-react)](https://www.npmjs.com/package/lucide-react) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-react) | [Docs](https://lucide.dev/guide/packages/lucide-react) [Source](./packages/lucide-react) |
| <img src="https://lucide.dev/framework-logos/vue.svg" alt="Vue logo" width="48"> | `lucide-vue-next` | [![npm](https://img.shields.io/npm/v/lucide-vue-next)](https://www.npmjs.com/package/lucide-vue-next) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-vue-next) | [Docs](https://lucide.dev/guide/packages/lucide-vue-next) [Source](./packages/lucide-vue-next) |
| <img src="https://lucide.dev/framework-logos/svelte.svg" alt="Svelte logo" width="48"> | `lucide-svelte` | [![npm](https://img.shields.io/npm/v/lucide-svelte)](https://www.npmjs.com/package/lucide-svelte) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-svelte) | [Docs](https://lucide.dev/guide/packages/lucide-svelte) [Source](./packages/lucide-svelte) |
| <img src="https://lucide.dev/framework-logos/solid.svg" alt="Solid logo" width="48"> | `lucide-solid` | [![npm](https://img.shields.io/npm/v/lucide-solid)](https://www.npmjs.com/package/lucide-solid) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-solid) | [Docs](https://lucide.dev/guide/packages/lucide-solid) [Source](./packages/lucide-solid) |
| <img src="https://lucide.dev/framework-logos/preact.svg" alt="Preact logo" width="48"> | `lucide-preact` | [![npm](https://img.shields.io/npm/v/lucide-preact)](https://www.npmjs.com/package/lucide-preact) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-preact) | [Docs](https://lucide.dev/guide/packages/lucide-preact) [Source](./packages/lucide-preact) |
| <img src="https://lucide.dev/framework-logos/react-native.svg" alt="React Native logo" width="48"> | `lucide-react-native` | [![npm](https://img.shields.io/npm/v/lucide-react-native)](https://www.npmjs.com/package/lucide-react-native) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-react-native) | [Docs](https://lucide.dev/guide/packages/lucide-react-native) [Source](./packages/lucide-react-native) |
| <img src="https://lucide.dev/framework-logos/angular.svg" alt="Angular logo" width="48"> | `lucide-angular` | [![npm](https://img.shields.io/npm/v/lucide-angular)](https://www.npmjs.com/package/lucide-angular) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-angular) | [Docs](https://lucide.dev/guide/packages/lucide-angular) [Source](./packages/lucide-angular) |
| <img src="https://lucide.dev/framework-logos/svg.svg" alt="SVG logo" width="48"> | `lucide-static` | [![npm](https://img.shields.io/npm/v/lucide-static)](https://www.npmjs.com/package/lucide-static) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-static) | [Docs](https://lucide.dev/guide/packages/lucide-static) [Source](./packages/lucide-static) |

### Figma

Expand All @@ -196,68 +50,6 @@ Visit [Figma community page](https://www.figma.com/community/plugin/939567362549

<img width="420" src="https://www.figma.com/community/plugin/939567362549682242/thumbnail" alt="Figma Lucide Cover">

### Laravel

Implementation of Lucide icon's using `blade-icons` for Laravel based projects.

```sh
composer require mallardduck/blade-lucide-icons
```

For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).

### Svelte

Implementation of the lucide icon library for Svelte applications.

```sh
yarn add lucide-svelte
```

or

```sh
npm install lucide-svelte
```

For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-svelte#lucide-svelte).

### Solid

Implementation of the lucide icon library for solid applications.

```sh
yarn add lucide-solid
```

or

```sh
npm install lucide-solid
```

For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-solid#lucide-solid).

### Hyva

Implementation of Lucide icon's using Hyvä's svg php viewmodal to render icons for Magento 2 Hyva theme based projects.

```sh
composer require siteation/magento2-hyva-icons-lucide
```

For more details, see the [documentation](https://github.com/Siteation/magento2-hyva-icons-lucide/blob/main/README.md).

### Eleventy

Using this plugin, Eleventy projects can incorporate Lucide icons. it makes it simple to use Lucide icons into your themes via shortcodes, improving your website's overall usability and visual appeal.

```sh
npm install @grimlink/eleventy-plugin-lucide-icons
```

For more details, see the [documentation](https://github.com/GrimLink/eleventy-plugin-lucide-icons/blob/main/README.md).

## Contributing

For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
Expand Down Expand Up @@ -287,6 +79,7 @@ Thank you to all the people who contributed to Lucide!

<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="docs/public/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>

### Awesome backer 🍺
### Awesome backers 🍺

<a href="https://www.scipress.io?utm_source=lucide"><img src="docs/public/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>
<a href="https://github.com/pdfme/pdfme"><img src="docs/public/sponsors/pdfme.svg" width="180" alt="pdfme sponsor badge" /></a>
56 changes: 20 additions & 36 deletions docs/.vitepress/data/packageData.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,24 +31,8 @@
}
]
},
"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,
"order": 2,
"icon": "vue-next",
"shields": [
{
Expand All @@ -64,7 +48,7 @@
]
},
"lucide-svelte": {
"order": 4,
"order": 3,
"icon": "svelte",
"shields": [
{
Expand Down Expand Up @@ -95,24 +79,8 @@
}
]
},
"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,
"order": 5,
"icon": "react-native",
"shields": [
{
Expand All @@ -128,7 +96,7 @@
]
},
"lucide-angular": {
"order": 7,
"order": 6,
"icon": "angular",
"shields": [
{
Expand All @@ -143,6 +111,22 @@
}
]
},
"lucide-preact": {
"order": 7,
"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-static": {
"order": 8,
"icon": "svg",
Expand Down
Loading

0 comments on commit d66775d

Please sign in to comment.