Compare commits

..
Author SHA1 Message Date
Karsa c8dda3d4e7 Merge branch 'main' into package/angularv17 2025-12-19 09:08:54 +01:00
Karsa a83fba9ecb fix(packages/angular): move to packages/angular, update github actions and templates 2025-12-19 09:07:20 +01:00
Karsa 2a9f3fa72e fix(packages/angular): revert changes made to lucide-angular 2025-12-17 21:47:09 +01:00
Karsa ae1ca07e36 fix(packages/angular-next): added angular-next package keeping original package intact 2025-12-17 21:46:02 +01:00
Karsa 818d99f41e Merge branch 'refs/heads/main' into package/angularv17 2025-12-17 10:48:40 +01:00
Karsa a3e7e75b90 fix(packages/icons): finalize exportTemplate before migration to input signals & effect to build component data 2025-12-17 09:35:03 +01:00
Karsa e851a03672 fix(packages/icons): trying some other variations 2025-12-15 11:53:37 +01:00
Karsa 0abfa2f0d5 Merge branch 'refs/heads/main' into package/angularv17
# Conflicts:
#	packages/lucide-angular/package.json
#	packages/lucide-angular/scripts/exportTemplate.mts
#	pnpm-lock.yaml
#	tools/build-icons/building/generateExportsFile.ts
#	tools/build-icons/building/generateIconFiles.ts
2025-12-15 10:05:13 +01:00
Karsa 6c1e34df19 feat(packages): angular v17 dead end 2025-04-19 17:15:08 +02:00
Karsa 669f62bb64 Merge branch 'refs/heads/main' into package/icons 2025-04-19 12:09:52 +02:00
Karsa 708d5114d6 feat(packages): added lucide icons package skeleton 2025-04-01 17:25:10 +02:00
3883 changed files with 38133 additions and 75624 deletions
+6 -1
View File
@@ -9,4 +9,9 @@ strikethrough
touchpad
ungroup
toc
sunlounger
# Brands
codepen
codesandbox
dribbble
x.com
+10
View File
@@ -0,0 +1,10 @@
dist
build
coverage
lib
tests
node_modules
.eslintrc.js
docs/images
docs/**/examples/
packages/lucide-react/dynamicIconImports.js
+75
View File
@@ -0,0 +1,75 @@
const DEFAULT_ATTRS = require('./tools/build-icons/render/default-attrs.json');
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
extends: ['airbnb-base', 'prettier'],
plugins: ['import', '@html-eslint'],
rules: {
'no-console': 'off',
'no-param-reassign': 'off',
'no-shadow': 'off',
'no-use-before-define': 'off',
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: ['**/*.test.js', '**/*.spec.js', '**/scripts/**'],
},
],
'import/extensions': [
'error',
{
pattern: {
mjs: 'always',
json: 'always',
},
},
],
},
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./docs/tsconfig.json', './packages/*/tsconfig.json'],
ecmaVersion: 'latest',
sourceType: 'module',
},
overrides: [
{
files: ['./icons/*.svg'],
parser: '@html-eslint/parser',
rules: {
'@html-eslint/require-doctype': 'off',
'@html-eslint/no-duplicate-attrs': 'error',
'@html-eslint/no-inline-styles': 'error',
'@html-eslint/require-attrs': [
'error',
...Object.entries(DEFAULT_ATTRS).map(([attr, value]) => ({
tag: 'svg',
attr,
value: String(value),
})),
],
'@html-eslint/indent': ['error', 2],
'@html-eslint/no-multiple-empty-lines': ['error', { max: 0 }],
'@html-eslint/no-extra-spacing-attrs': [
'error',
{
enforceBeforeSelfClose: true,
},
],
'@html-eslint/require-closing-tags': [
'error',
{
selfClosing: 'always',
allowSelfClosingCustom: true,
},
],
'@html-eslint/element-newline': 'error',
'@html-eslint/no-trailing-spaces': 'error',
'@html-eslint/quotes': 'error',
},
},
],
};
@@ -1,49 +0,0 @@
title: 'Icon Request: '
body:
- type: markdown
attributes:
value: |
Before submitting an icon request check if it has already been requested. If there is an open request, please add a 👍.
> [!CAUTION]
> New brand logos are **not** allowed, see our official statement: https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md.
>
> Existing brand icons have been phased out. Consider using https://simpleicons.org, which offers purpose-built SVGs that are also on a 24×24px grid.
- type: input
id: name
attributes:
label: Icon name
description: What should this icon depict? For multiple icons, provide a comma-separated list.
validations:
required: true
- type: textarea
id: use-cases
attributes:
label: Use cases
description: Why do you need this icon? Include at least two real-life use cases per requested icon, avoiding generic descriptions like "it's a car icon".
placeholder: e.g. I need a star icon to use in my rating system.
validations:
required: true
- type: textarea
id: design-ideas
attributes:
label: Design ideas
description: What should this icon look like? Provide simple, minimalistic icon examples from other sets or your own drafts to help us visualize your request.
validations:
required: true
- type: checkboxes
id: checklist
attributes:
label: Checklist
description: Please review the following checklist before submitting your request.
options:
- label: I have searched if someone has submitted a similar request before and there weren't any.
required: true
- label: I have searched existing icons to make sure it does not already exist and I didn't find any.
required: true
- label: I am not requesting a brand logo and the art is not protected by copyright, see more at https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md
required: true
- label: I am not requesting an icon that includes religious, war/violence related, political imagery or hate symbols.
required: true
- label: I have provided appropriate use cases for the icon(s) requested.
required: true
+10 -10
View File
@@ -13,19 +13,19 @@ body:
description: Which Lucide packages are affected? You may select more than one.
options:
- label: lucide
- label: lucide-react
- label: '@lucide/vue'
- label: '@lucide/svelte'
- label: '@lucide/angular'
- label: lucide-angular (old version)
- label: '@lucide/angular (new version)'
- label: '@lucide/astro'
- label: lucide-react-native
- label: lucide-flutter
- label: lucide-preact
- label: lucide-react
- label: lucide-react-native
- label: lucide-solid
- label: lucide-static
- label: '@lucide/icons'
- label: lucide-vue-next (deprecated)
- label: lucide-svelte (deprecated)
- label: lucide-angular (deprecated)
- label: lucide-svelte (old version)
- label: `@lucide/svelte (new version)`
- label: lucide-vue
- label: lucide-vue-next
- label: Figma plugin
- label: source/main
- label: other/not relevant
@@ -36,7 +36,7 @@ body:
attributes:
label: Version
description: What version of Lucide are you running?
placeholder: e.g. 1.1.0
placeholder: e.g. 0.289.1
validations:
required: true
- type: checkboxes
@@ -13,19 +13,19 @@ body:
description: Which Lucide project do you wish this feature were added to? You may select more than one.
options:
- label: lucide
- label: lucide-react
- label: '@lucide/vue'
- label: '@lucide/svelte'
- label: '@lucide/angular'
- label: lucide-angular (old version)
- label: '@lucide/angular (new version)'
- label: '@lucide/astro'
- label: lucide-react-native
- label: lucide-flutter
- label: lucide-preact
- label: lucide-react
- label: lucide-react-native
- label: lucide-solid
- label: lucide-static
- label: '@lucide/icons'
- label: lucide-vue-next (deprecated)
- label: lucide-svelte (deprecated)
- label: lucide-angular (deprecated)
- label: lucide-svelte (old version)
- label: `@lucide/svelte (new version)`
- label: lucide-vue
- label: lucide-vue-next
- label: Figma plugin
- label: all JS packages
- label: site
-8
View File
@@ -1,8 +0,0 @@
## Reviewing PRs
When reviewing PRs, please respond in a friendly and constructive manner.
- First, thank the contributor for their contribution in an enthusiastic way.
- If you have any suggestions for improvement, provide them clearly and concisely.
- If you have any questions about the PR, ask them respectfully.
- Let the contributor know that we have many PRs to review and that we appreciate their patience while we review their contribution.
-106
View File
@@ -1,106 +0,0 @@
version: 2
updates:
- package-ecosystem: npm
directory: /
schedule:
interval: weekly
groups:
react-deps:
patterns:
- '@testing-library/react'
- '@types/prop-types'
- '@types/react'
- '@vitejs/plugin-react'
- 'react'
- 'react-dom'
vue-deps:
patterns:
- '@testing-library/vue'
- '@vitejs/plugin-vue'
- '@vue/test-utils'
- 'vue'
svelte-deps:
patterns:
- '@sveltejs/*'
- '@testing-library/svelte'
- '@tsconfig/svelte'
- 'svelte'
- 'svelte-check'
- 'svelte-preprocess'
solid-deps:
patterns:
- '@babel/*'
- '@rollup/plugin-babel'
- '@solidjs/testing-library'
- 'babel-preset-solid'
- 'solid-js'
- 'vite-plugin-solid'
react-native-deps:
patterns:
- 'react-native'
- 'react-native-svg'
angular-deps:
patterns:
- '@angular/*'
- '@angular-eslint/*'
- '@vitest/browser-playwright'
- 'angular-eslint'
- 'ng-packagr'
- 'rxjs'
- 'tslib'
preact-deps:
patterns:
- '@preact/preset-vite'
- '@testing-library/preact'
- 'preact'
astro-deps:
patterns:
- '@astrojs/*'
- 'astro'
testing-deps:
patterns:
- '@testing-library/*'
- '@vitest/*'
- 'jest-serializer-html'
- 'jsdom'
- 'linkedom'
- 'vitest'
build-deps:
patterns:
- '@rollup/*'
- '@vitejs/*'
- 'esbuild'
- 'rollup'
- 'rollup-plugin-*'
- 'typescript'
- 'vite'
- 'vite-plugin-*'
linting-deps:
patterns:
- '@eslint/*'
- '@html-eslint/*'
- '@typescript-eslint/*'
- 'angular-eslint'
- 'cspell'
- 'eslint'
- 'eslint-*'
- 'husky'
- 'lint-staged'
- 'prettier'
- 'prettier-plugin-*'
types-deps:
patterns:
- '@types/*'
remaining-deps:
patterns:
- '*'
- package-ecosystem: github-actions
directory: /
schedule:
interval: monthly
groups:
github-actions:
patterns:
- '*'
@@ -1,84 +0,0 @@
---
applyTo: "icons/*.json"
---
# JSON Metadata Descriptor
The schema for the JSON metadata descriptor can be found in `icon.schema.json`. It defines the required and optional properties for the JSON files that accompany each icon. The JSON metadata descriptor should be placed in the same directory as the SVG file of the icon and should have the same name as the SVG file, but with a `.json` extension. For example, if the SVG file is named `home.svg`, the JSON metadata descriptor should be named `home.json`.
## Contributors
The `contributors` property is a required array of GitHub usernames for the people who created or contributed to the icon. It is used to give credit to contributors and to track the icon's history. Add the PR author to the `contributors` array if they are not already listed and they have made a significant contribution to the icon's SVG.
## Tags
The `tags` property is an array of strings that describe the icon and can be used for searching.
Validate the tags against the `icon.schema.json` to ensure they are correctly formatted and adhere to the defined structure.
Provide tag suggestions based on the name of the icon and the use cases provided in the PR description. Use the existing tags in the repository as a reference for consistency and to avoid duplicates. Don't suggest words like: 'icon' and preferably use single words. Tags should always be in lowercase, and may also contain spaces (e.g. `magnifying glass`). The name of icon should not be included in the tags, as it is already specified.
## Categories
The `categories` property is an array of strings that specify the categories to which the icon belongs, such as "devices", "interface", "media", etc. See the `categories` property in the `icon.schema.json` for more details on the allowed values. The categories should be chosen based on the use cases provided in the PR description and the existing categories in the repository. The categories should be relevant to the icon and should help users find the icon when searching for specific types of icons. The name of icon should not be included in the categories, as it is already specified. Suggest categories based on the name of the icon and the use cases provided in the PR description. Use the existing categories in the repository as a reference for consistency and to avoid duplicates. Categories should always be in lowercase and should not contain spaces.
## Use Cases
The `use-cases` property is an array of strings that describe the specific scenarios in which the icon would be used. Each use case should be concise and clearly convey the context in which the icon is applicable. Use the existing use cases in the repository as a reference for consistency and to avoid duplicates.
### Writing icon use-cases
A use-case tells a reader **where and why an icon would be used in a real interface**. Each entry should let someone who has never seen the icon understand what it's for.
### Format
- Write each use-case as a short phrase, not a sentence. Start with a present participle verb: *Representing…*, *Indicating…*, *Marking…*, *Showing…*, *Confirming…*, *Toggling…*, *Categorizing…*, *Searching…*.
- Keep it to roughly 4–12 words. One clear idea per entry.
- No trailing period. No leading bullet, number, or dash (the surrounding format supplies that).
- Give each icon 1–4 use-cases, ordered most-common first. Prefer fewer strong entries over many weak or repetitive ones.
### Voice
- Write from the interface's perspective, describing the function: "Indicating a low battery charge level" — not the requester's story ("I need an icon that shows…").
- Name the concrete context where useful: *in smart home apps*, *in navigation apps*, *in text editors*, *on maps*. Context is what makes a use-case self-explanatory.
- Be neutral and factual. No first person, no marketing adjectives ("perfect for", "ideal", "beautiful"), no emoji.
### What to exclude
- **The requester's personal narrative.** "I'm building a SvelteKit UI and need…" → drop the framing, keep the function.
- **References to other issues, PRs, or icons by ID.** No "As provided in #1865", "complementary to git-branch-plus", "same as above", "see #2055".
- **Design/implementation chatter.** Bezier offsets, grid alignment, path cuts, "the icon works perfectly" — none of that is a use-case.
- **Restating the icon's name.** For `microchip`, "microchip" is not a use-case; describe what it represents ("Representing processors, chips, or embedded hardware").
- **Links, image tags, emoji, and markdown artifacts.**
- **Meta-commentary.** "Self-explanatory", "lots and lots of use cases", "obvious :)".
### Cross-contamination
When a request covers several icons at once, assign each use-case only to the icon it actually describes. A bullet prefixed with another icon's name belongs to that icon, not this one. Don't let `briefcase-medical`'s meanings leak into `briefcase-business`.
### Variants
Related icons should get **variant-specific** wording, not one shared blurb. `battery-low` → "Indicating a low battery charge level"; `battery-full` → "…full…". `square-arrow-right-enter` → sign in / join; `-exit` → sign out / export. Resist copying the same line across a family.
### Deriving from source material
When mining descriptions, comments, or linked issues:
- Prefer the **stated purpose** over the backstory. Extract the function, discard the anecdote.
- If a source lists genuinely distinct uses, keep them as separate entries; if it repeats one idea five ways, collapse to one.
- Merge an intro line with its bullets ("To represent:" + "pottery" → "Representing pottery").
- If the only signal is noise (a name restatement, a link, "thanks!"), leave the icon without a use-case rather than inventing one.
- Never fabricate a use-case that isn't supported by the icon's meaning or the source.
## Examples
Good:
- `ambulance` → "Directing users to nearby emergency services in navigation apps"
- `calendar-sync` → "Representing recurring events, promotions, or limited-time offers"
- `globe-x` → "Indicating a device or application is offline or unreachable"
- `heading-2` → "Applying a level-2 heading in text editors"
Poor → fixed:
- ~~"I need a firewall icon :-)"~~ → "Representing firewalls and firewall rules on cybersecurity platforms"
- ~~"As above"~~ → "Signifying a deal, agreement, or partnership"
- ~~"microchip"~~ → "Representing processors, chips, or embedded hardware"
- ~~"Same use cases as the other currency symbols, except Turkish lira"~~ → "Displaying prices or amounts in Turkish lira"
@@ -1,587 +0,0 @@
---
applyTo: "docs/*.md"
---
# UX writing guidelines
Follow these guidelines when writing or editing Lucide documentation, especially Markdown files.
Write for people who are trying to understand a concept, follow a specification, or complete a task. Prioritize clarity, precision, and scannability over personality or decorative prose.
## Be direct and concise
State the important information first. Remove words that do not add meaning.
Prefer short sentences and paragraphs, but do not sacrifice precision just to make text shorter.
**Do:**
> Icons must use a 24 × 24 pixel canvas.
**Don't:**
> When creating a new icon, you should make sure that the canvas you're working with has dimensions of 24 × 24 pixels.
Avoid unnecessary introductions such as:
- "It's important to note that…"
- "Keep in mind that…"
- "As you can see…"
- "In order to…"
- "It should be noted that…"
State the information directly instead.
## Put the rule before the explanation
When documenting a requirement or recommendation, state it before explaining why it exists.
**Do:**
> Keep at least 1 pixel of space between unrelated elements. This prevents shapes from visually merging at small sizes.
**Don't:**
> Because shapes can visually merge at small sizes, it's important to make sure that unrelated elements have enough space between them.
This makes documentation easier to scan and makes normative requirements easier to identify.
## Explain the reason when it adds value
Explain *why* a rule exists when the reasoning helps contributors apply it to situations that are not explicitly documented.
Do not merely restate the rule.
**Do:**
> Avoid simulated fills. They don't scale consistently with the rest of the icon set.
**Don't:**
> Avoid simulated fills because simulated fills should not be used.
Reasoning is particularly useful for design rules where contributors may need to evaluate unusual cases.
## Use scannable structure
Assume readers will scan the page before reading it in detail.
Use:
- descriptive headings
- short paragraphs
- lists for sets of related items
- examples for rules that benefit from demonstration
- **bold** for important terms or short emphasis
- code formatting for filenames, properties, commands, values, and identifiers
Avoid long uninterrupted blocks of text.
Headings should communicate the subject or rule without requiring the surrounding text for context.
**Do:**
> ## Keep 1 pixel of safe space
**Don't:**
> ## Spacing
## Use sentence case
Use sentence case for:
- page titles
- headings
- table headings
- labels
- example captions
Capitalize proper nouns and branded terms normally.
**Do:**
> ## Use consistent corner radii
**Don't:**
> ## Use Consistent Corner Radii
## Address the reader directly
Use **you** and **your** when referring to something the reader does.
**Do:**
> If your icon contains overlapping shapes, simplify the hidden geometry.
Avoid referring to the reader as "the user," "the contributor," or other third-person terms when direct language is more natural.
However, prefer an imperative when the subject is obvious.
**Prefer:**
> Keep related elements visually grouped.
**Over:**
> You should keep related elements visually grouped.
## Use "we" only when it means the Lucide project or maintainers
First-person plural is acceptable when describing an intentional project decision, convention, or policy.
**Do:**
> We use `kebab-case` for icon names.
> We generally avoid adding brand logos to Lucide.
Do not use "we" merely to make documentation conversational.
**Prefer:**
> Icons use a 2 pixel stroke.
**Over:**
> We use a 2 pixel stroke for our icons.
## Use normative language consistently
Use specific language to communicate how strictly a rule applies.
- **must** — required; violating this is not acceptable
- **must not** — prohibited
- **should** — recommended; exceptions may be appropriate
- **should not** — discouraged; exceptions may be appropriate
- **can** — possible or permitted
- **may** — optional or dependent on context
Do not use **should** when something is actually required.
**Do:**
> Icons must use a 24 × 24 pixel canvas.
**Don't:**
> Icons should use a 24 × 24 pixel canvas.
Avoid vague substitutes such as "ideally," "normally," or "preferably" when a more precise normative term applies.
## Prefer active voice
Use active voice unless passive voice makes the subject clearer or avoids unnecessary repetition.
**Do:**
> Align nodes to the pixel grid.
**Don't:**
> Nodes should be aligned to the pixel grid.
Passive voice is acceptable when the actor is irrelevant.
> Deprecated icons are removed in major releases.
## Use positive instructions when possible
Tell readers what to do rather than only what not to do.
**Do:**
> Use a single continuous path when the elements form one continuous shape.
**Less useful:**
> Don't split continuous shapes into unnecessary paths.
Use negative instructions when the prohibition itself is important.
> Don't use simulated fills.
## Be precise about consequences
When explaining why something should or should not be done, describe the actual consequence rather than using vague warnings.
**Do:**
> Keep unrelated elements at least 2 pixels apart. Smaller gaps can disappear when the icon is rendered at small sizes.
**Don't:**
> Be careful when placing elements too close together.
Avoid language that exaggerates consequences or attempts to influence a contributor's decision emotionally.
## Prefer concrete language
Use specific terms instead of vague references.
**Do:**
> The two endpoints must remain inside the 1 pixel safe zone.
**Don't:**
> These should stay within the appropriate area.
Avoid ambiguous references such as:
- this
- that
- it
- things
- stuff
- appropriate
- proper
- correct
when the intended subject can be named directly.
## Introduce terminology before relying on it
Define Lucide-specific or technical terms when readers may not already know them.
Once defined, use the same term consistently.
**Do:**
> The **safe zone** is the 1 pixel area between the icon artwork and the canvas boundary.
Do not alternate between different terms for the same concept unless the distinction is intentional.
For example, don't alternate between "safe zone," "padding," and "margin" if they refer to the same rule.
## Use abbreviations sparingly
Spell out uncommon abbreviations on first use.
> Scalable Vector Graphics (SVG)
Common technical abbreviations such as HTML, CSS, SVG, API, and URL do not need to be expanded when the intended audience can reasonably be expected to know them.
Avoid Latin abbreviations such as:
- e.g.
- i.e.
- etc.
Prefer:
- for example
- that is
- and so on
## Use examples deliberately
Use examples when they clarify how to apply a rule.
Keep examples focused on the rule being demonstrated. Avoid introducing unrelated differences that make the comparison harder to understand.
When contrasting examples, use **Do** and **Don't** consistently.
**Do:**
> Use one path for a continuous outline.
**Don't:**
> Split a continuous outline into several overlapping paths.
The explanatory text should describe the principle, not merely narrate what is visible in the example.
## Use links descriptively
Link text should describe the destination or concept.
**Do:**
> See the [Icon Design Specification](./specification) for exact dimensions and spacing requirements.
**Don't:**
> For more information, [click here](./specification).
Avoid generic link text such as:
- click here
- here
- this page
- learn more
when a descriptive label is possible.
## Avoid unnecessary repetition
Do not repeat information already established by a heading, example, or immediately preceding sentence.
**Prefer:**
> ## Keep 1 pixel of safe space
>
> Keep all artwork within the 22 × 22 pixel live area.
**Over:**
> ## Keep 1 pixel of safe space
>
> When designing an icon, you should keep 1 pixel of safe space around the icon.
Cross-reference another section instead of duplicating detailed rules that already have a canonical explanation.
## Use contractions in prose
Use natural contractions such as:
- don't
- can't
- isn't
- it's
- you'll
They make explanatory prose less formal and easier to scan.
Use uncontracted forms when deliberate emphasis is useful.
> Do not change existing icon geometry solely to reduce the number of SVG nodes.
Normative statements using **must not** should not be contracted.
## Use the serial comma
Use the serial (Oxford) comma in lists of three or more items.
**Do:**
> Check the icon's size, stroke width, and spacing.
**Don't:**
> Check the icon's size, stroke width and spacing.
## Use punctuation normally in prose
Use periods for complete sentences.
Periods may be omitted from:
- headings
- short labels
- short list items that are not complete sentences
- captions consisting only of a short phrase
Be consistent within a list.
If list items are complete sentences, end them with periods. If they are fragments, generally omit periods.
## Skip colons in headings
Do not end headings with colons.
**Do:**
> ## Naming conventions
**Don't:**
> ## Naming conventions:
Use a colon normally when introducing a list or explanation in body text.
## Use exclamation points sparingly
Avoid exclamation points in technical documentation unless the context genuinely calls for excitement or celebration.
**Prefer:**
> Your first icon is ready.
**Over:**
> Your first icon is ready!
Do not use exclamation points to make instructions sound friendlier.
## Use ellipses only when they have meaning
Use an ellipsis (`…`) to represent omitted content or an intentionally incomplete statement.
Do not use ellipses decoratively or to make prose sound conversational.
When documenting literal UI text, preserve the punctuation used by the interface.
## Use parentheses for definitions and compact clarification
Use parentheses when they make a definition, abbreviation, or short clarification easier to understand.
> Scalable Vector Graphics (SVG)
Avoid using parentheses for long side notes. Rewrite important information as part of the sentence or as a separate sentence.
## Prefer "and" over ampersands
Use **and** in normal prose.
**Do:**
> Naming and metadata
**Avoid:**
> Naming & metadata
Use an ampersand only when it is part of an official name, literal UI text, code, or another established term.
## Avoid em dashes
Prefer commas, periods, colons, or parentheses when they produce a simpler sentence.
**Prefer:**
> This rule has one exception: existing legacy icons.
**Avoid:**
> This rule has one exception — existing legacy icons.
Use an en dash (`–`) without surrounding spaces for ranges.
> 1–3 pixels
> A–Z
Do not substitute a hyphen for an en dash in prose ranges unless required by a technical syntax.
## Use hyphens correctly
Hyphenate compound modifiers when necessary for clarity.
> 24 × 24 pixel canvas
> 2-pixel-wide gap
> pixel-aligned element
Do not hyphenate a phrase when it functions as a verb.
> Sign off on the design.
> Complete the sign-off.
Do not add hyphens mechanically when the meaning is already clear.
## Use code formatting consistently
Use backticks for literal technical values and identifiers, including:
- filenames and paths
- commands
- package names
- properties and attributes
- icon names
- code values
- SVG elements and attributes
**Do:**
> Add `camera-off` as an alias.
> Set `stroke-width` to `2`.
> Edit `icons/camera.svg`.
Do not use code formatting merely for emphasis.
## Use bold for semantic emphasis
Use **bold** sparingly to highlight a term or distinction that helps readers scan the page.
Do not bold entire sentences or paragraphs.
Prefer bold over italics for general emphasis.
Use *italics* only when conventional, such as when referring to a term as a term or when a specific distinction benefits from it.
## Don't use all caps for emphasis
Do not use blocks of uppercase text for emphasis.
**Don't:**
> NEVER place nodes outside the canvas.
**Do:**
> **Never** place nodes outside the canvas.
Preserve capitalization when documenting literal identifiers or established technical terms.
## Keep lists parallel
Items in the same list should use the same grammatical structure.
**Do:**
- Use a 24 × 24 pixel canvas
- Keep 1 pixel of safe space
- Use a 2 pixel stroke
- Align nodes to the pixel grid
**Don't:**
- Use a 24 × 24 pixel canvas
- Safe space should be 1 pixel
- A 2 pixel stroke
- Nodes are aligned to the pixel grid
Parallel structure makes rules easier to scan and compare.
## Avoid unnecessary filler and enthusiasm
Lucide documentation should sound helpful and confident, not promotional.
Avoid filler such as:
- "Simply…"
- "Just…"
- "Obviously…"
- "Of course…"
- "Easy…"
- "Luckily…"
- "Don't worry…"
These words can be inaccurate or dismissive when the task is not simple for the reader.
Also avoid marketing language such as:
- "powerful"
- "seamless"
- "effortless"
- "amazing"
- "best-in-class"
unless the word communicates a specific, verifiable distinction.
## Prefer timeless documentation
Avoid wording tied unnecessarily to the current state of development.
**Prefer:**
> Lucide supports custom icon aliases.
**Avoid:**
> Lucide now supports custom icon aliases.
Use time-sensitive language only when the timing itself matters, such as migration notes, deprecations, or release documentation.
## Preserve established Lucide terminology
When editing existing documentation, preserve established Lucide terminology and naming conventions unless there is a clear reason to change them.
Do not invent synonyms merely to avoid repetition. Consistency is more important than stylistic variety in technical documentation.
When terminology differs between the Lucide codebase, API, UI, and documentation, prefer the term used by the relevant canonical specification.
+19 -22
View File
@@ -30,73 +30,70 @@
- any-glob-to-any-file:
- 'icons/*.svg'
🔬 Lab icon:
- changed-files:
- any-glob-to-any-file:
- 'lab/*.svg'
# For changes in the lucide package
🧳 lucide package:
- changed-files:
- any-glob-to-any-file:
- 'packages/lucide/*'
# For changes in the Lucide React package
# For changes in the lucide React package
⚛️ react package:
- changed-files:
- any-glob-to-any-file:
- 'packages/lucide-react/*'
# For changes in the Lucide React Native package
# For changes in the lucide React Native package
⚛️ react native package:
- changed-files:
- any-glob-to-any-file:
- 'packages/lucide-react-native/*'
# For changes in the Lucide vue packages
# For changes in the lucide vue packages
💎 vue package:
- changed-files:
- any-glob-to-any-file:
- 'packages/vue/*'
- 'packages/lucide-vue/*'
- 'packages/lucide-vue-next/*'
# For changes in the Lucide angular package
# For changes in the lucide angular package
🅰️ angular package:
- changed-files:
- any-glob-to-any-file:
- 'packages/angular/*'
- 'packages/lucide-angular/*'
# For changes in the Lucide preact package
# For changes in the lucide preact package
⚛️ preact package:
- changed-files:
- any-glob-to-any-file:
- 'packages/lucide-preact/*'
# For changes in the Lucide svelte package
# For changes in the lucide svelte package
🧣 svelte package:
- changed-files:
- any-glob-to-any-file:
- 'packages/svelte/*'
- 'packages/lucide-svelte/*'
# For changes in the Lucide solid package
# For changes in the lucide solid package
🪝 solid package:
- changed-files:
- any-glob-to-any-file:
- 'packages/lucide-solid/*'
# For changes in the Lucide astro package
# For changes in the lucide astro package
🚀 astro package:
- changed-files:
- any-glob-to-any-file:
- 'packages/astro/*'
# For changes in the @lucide/icons package
❇️ lucide-icons:
- changed-files:
- any-glob-to-any-file:
- 'packages/lucide-icons/*'
# For changes in the Lucide static package
# For changes in the lucide static package
🪨 static package:
- changed-files:
- any-glob-to-any-file:
- 'packages/lucide-static/*'
# For changes in the lucide flutter package
🏹 flutter package:
- changed-files:
- any-glob-to-any-file:
- 'packages/lucide-flutter/*'
+2 -4
View File
@@ -41,15 +41,13 @@ Common scopes: icons, docs, studio, site, dev
### Naming <!-- ONLY for new icons -->
<!-- All of these requirements must be fulfilled. -->
- [ ] I've read and followed the [naming conventions](https://lucide.dev/contribute/icon-design-guide#naming-conventions)
- [ ] I've read and followed the [naming conventions](https://lucide.dev/guide/design/icon-design-guide#naming-conventions)
- [ ] I've named icons by what they are rather than their use case.
- [ ] I've provided meta JSON files in `icons/[iconName].json`.
### Design <!-- ONLY for new icons -->
<!-- All of these requirements must be fulfilled. -->
- [ ] I've read and followed the [icon design guidelines](https://lucide.dev/contribute/icon-design-guide)
- [ ] I've made sure that the icons don't [already exist](https://lucide.dev/icons), including the [Lab directory](https://github.com/lucide-icons/lucide/tree/main/lab).
- [ ] I've read and followed the [icon design guidelines](https://lucide.dev/guide/design/icon-design-guide)
- [ ] I've made sure that the icons look sharp on low DPI displays.
- [ ] I've made sure that the icons look consistent with the icon set in size, optical volume and density.
- [ ] I've made sure that the icons are visually centered.
+6 -9
View File
@@ -7,16 +7,13 @@ on:
- tools/build-icons/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -30,9 +27,9 @@ jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
+10 -70
View File
@@ -7,67 +7,21 @@ on:
paths:
- icons/**/*.svg
workflow_dispatch:
inputs:
version:
description: Version
required: true
tag:
required: true
description: NPM tag
default: 'latest'
type: choice
options:
- latest
- next
- beta
- alpha
permissions: {}
permissions:
id-token: write # Required for OIDC
contents: write
jobs:
check-dispatch-gate:
if: github.repository == 'lucide-icons/lucide' &&
startsWith(github.event.head_commit.message, 'feat(icons)') &&
github.event_name != 'workflow_dispatch'
runs-on: ubuntu-latest
permissions:
contents: read
outputs:
RELEASE_ENVIRONMENT: ${{ steps.environment.outputs.RELEASE_ENVIRONMENT }}
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- name: Fetch tags
run: git fetch --all --tags
- name: Check if latest tag was created today
id: environment
run: |
LATEST_TAG=$(git tag --sort=-v:refname | grep -E '^[0-9]+\.[0-9]+\.[0-9]+$' | head -n 1)
TAG_DATE=$(git log -1 --format=%cs "$LATEST_TAG")
TODAY=$(date +%Y-%m-%d)
if [ "$TAG_DATE" == "$TODAY" ]; then
echo "::warning::A release tag already exists for today ($TODAY): $LATEST_TAG. Manual approval will be required to proceed."
echo "RELEASE_ENVIRONMENT=Icon Release Gated" >> $GITHUB_OUTPUT
else
echo "RELEASE_ENVIRONMENT=Icon Release" >> $GITHUB_OUTPUT
fi
create-release:
if: github.repository == 'lucide-icons/lucide'
needs: check-dispatch-gate
environment: ${{ needs.check-dispatch-gate.outputs.RELEASE_ENVIRONMENT }}
if: github.repository == 'lucide-icons/lucide' && startsWith(github.event.head_commit.message, 'feat(icons)')
runs-on: ubuntu-latest
permissions:
contents: write # Required to create the release and tag
outputs:
VERSION: ${{ steps.new-version.outputs.NEW_VERSION }}
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -80,7 +34,7 @@ jobs:
- name: Get latest tag
id: latest-tag
run: echo "LATEST_TAG=$(git tag --sort=-v:refname | grep -E '^[0-9]+\.[0-9]+\.[0-9]+$' | head -n 1)" >> $GITHUB_OUTPUT
run: echo "LATEST_TAG=$(git describe --tags `git rev-list --tags --max-count=1`)" >> $GITHUB_OUTPUT
- name: Log latest tag
run: echo '${{ steps.latest-tag.outputs.LATEST_TAG }}'
@@ -102,7 +56,7 @@ jobs:
echo '${{ steps.change-log.outputs.CHANGE_LOG }}'
- name: Create Release
uses: softprops/action-gh-release@efb35369e0ad2afab669f228072c1b0d510eae64 # v3.0.3
uses: softprops/action-gh-release@v1
with:
tag_name: ${{ steps.new-version.outputs.NEW_VERSION }}
name: Version ${{ steps.new-version.outputs.NEW_VERSION }}
@@ -113,19 +67,5 @@ jobs:
needs: create-release
uses: './.github/workflows/release.yml'
secrets: inherit
permissions:
id-token: write # Required for OIDC (npm provenance)
contents: write # Required to upload release assets
with:
version: ${{ needs.create-release.outputs.VERSION }}
dispatch-release:
if: github.repository == 'lucide-icons/lucide' && github.event_name == 'workflow_dispatch'
uses: './.github/workflows/release.yml'
secrets: inherit
permissions:
id-token: write # Required for OIDC (npm provenance)
contents: write # Required to upload release assets
with:
version: ${{ inputs.version }}
tag: ${{ inputs.tag }}
@@ -3,28 +3,18 @@ name: Close Icon Requests with Brand Terms
on:
issues:
types: [opened]
discussion:
types: [created]
permissions: {}
env:
GH_TOKEN: ${{ github.token }}
jobs:
block_phrases:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
permissions:
contents: read
issues: write
discussions: write
steps:
- name: Checkout repository
uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
uses: actions/checkout@v6
- name: Load stopwords from JSON & check issue title & body
if: github.event_name == 'issues' && contains(github.event.issue.labels.*.name, '🙌 icon request')
if: contains(github.event.issue.labels.*.name, '🙌 icon request')
run: |
ISSUE_TITLE=$(jq -r '.issue.title' "$GITHUB_EVENT_PATH")
ISSUE_BODY=$(jq -r '.issue.body // ""' "$GITHUB_EVENT_PATH")
@@ -37,17 +27,15 @@ jobs:
if echo "$ISSUE_TITLE" | grep -iqE "$SAFE_KEY|$SAFE_VALUE" || \
{ [ -n "$ICON_NAME_SECTION" ] && echo "$ICON_NAME_SECTION" | grep -iqE "$SAFE_KEY|$SAFE_VALUE"; }; then
URL_ENCODED_VALUE=$(jq -rn --arg val "$VALUE" '$val|@uri')
gh issue close ${{ github.event.issue.number }} \
--reason "not planned" \
--reason "not_planned" \
--comment "It looks like this request is about **${VALUE}**, which is a brand logo.
Lucide **does not accept** brand logos, and we do not plan to add them in the future. This is due to a combination of **legal restrictions**, **design consistency concerns**, and **practical maintenance reasons**.
[Click here to read our official statement about brand logos in Lucide.](https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md)
[Click here to read our official statement about brand logos in Lucide.](./BRAND_LOGOS_STATEMENT.md)
You can [search for similar issues.](https://github.com/lucide-icons/lucide/issues?q=is%3Aissue+${URL_ENCODED_VALUE})
You can [search for similar issues.](https://github.com/lucide-icons/lucide/issues?q=is%3Aissue+${VALUE})
We’re always happy to help on [Discord](https://discord.gg/EH6nSts)."
@@ -56,55 +44,5 @@ jobs:
fi
done
- name: Load stopwords from JSON & check discussion title & body
if: github.event_name == 'discussion' && github.event.discussion.category.slug == 'icon-design'
run: |
DISCUSSION_TITLE=$(jq -r '.discussion.title' "$GITHUB_EVENT_PATH")
DISCUSSION_BODY=$(jq -r '.discussion.body // ""' "$GITHUB_EVENT_PATH")
ICON_NAME_SECTION=$(printf '%s\n' "$DISCUSSION_BODY" | awk '/### Icon name/{flag=1; next} /^### /{flag=0} flag')
jq -r 'to_entries[] | "\(.key) \(.value)"' brand-stopwords.json | while read -r KEY VALUE; do
SAFE_KEY=$(printf '%s\n' "$KEY" | sed 's/[][\.^$*]/\\&/g')
SAFE_VALUE=$(printf '%s\n' "$VALUE" | sed 's/[][\.^$*]/\\&/g')
if echo "$DISCUSSION_TITLE" | grep -iqE "$SAFE_KEY|$SAFE_VALUE" || \
{ [ -n "$ICON_NAME_SECTION" ] && echo "$ICON_NAME_SECTION" | grep -iqE "$SAFE_KEY|$SAFE_VALUE"; }; then
URL_ENCODED_VALUE=$(jq -rn --arg val "$VALUE" '$val|@uri')
DISCUSSION_NODE_ID=$(jq -r '.discussion.node_id' "$GITHUB_EVENT_PATH")
COMMENT_BODY="It looks like this request is about **${VALUE}**, which is a brand logo.
Lucide **does not accept** brand logos, and we do not plan to add them in the future. This is due to a combination of **legal restrictions**, **design consistency concerns**, and **practical maintenance reasons**.
[Click here to read our official statement about brand logos in Lucide.](https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md)
You can [search for similar discussions.](https://github.com/lucide-icons/lucide/discussions/categories/icon-design?discussions_q=category%253A%22Icon+design%22+${URL_ENCODED_VALUE})
We’re always happy to help on [Discord](https://discord.gg/EH6nSts)."
# Add comment to discussion
gh api graphql -f query='
mutation($discussionId: ID!, $body: String!) {
addDiscussionComment(input: {discussionId: $discussionId, body: $body}) {
comment { id }
}
}' -f discussionId="$DISCUSSION_NODE_ID" -f body="$COMMENT_BODY"
# Close discussion
gh api graphql -f query='
mutation($discussionId: ID!) {
closeDiscussion(input: {discussionId: $discussionId}) {
discussion { closed }
}
}' -f discussionId="$DISCUSSION_NODE_ID"
# Lock discussion
gh api graphql -f query='
mutation($lockableId: ID!, $reason: LockReason) {
lockLockable(input: {lockableId: $lockableId, lockReason: $reason}) {
lockedRecord { locked }
}
}' -f lockableId="$DISCUSSION_NODE_ID" -f reason="SPAM"
exit 0
fi
done
env:
GH_TOKEN: ${{ github.token }}
+1 -4
View File
@@ -3,16 +3,13 @@ on:
schedule:
- cron: '45 1 * * *'
permissions: {}
jobs:
stale:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
permissions:
pull-requests: write
steps:
- uses: actions/stale@4391f3da665fdf50b6810c1a66712fb9ba21aa93 # v11.0.0
- uses: actions/stale@v9
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
stale-pr-message: This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.
+3 -10
View File
@@ -6,22 +6,15 @@ on:
types:
- completed
permissions: {}
jobs:
upload:
runs-on: ubuntu-latest
permissions:
contents: read
actions: read # Required to download the artifact from the triggering run
pull-requests: write
if: >
github.repository == 'lucide-icons/lucide' &&
github.event.workflow_run.event == 'pull_request' &&
github.event.workflow_run.conclusion == 'success'
steps:
- name: 'Download artifact'
uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
uses: actions/github-script@v7
with:
script: |
let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
@@ -49,7 +42,7 @@ jobs:
id: pr-number
- name: Find Comment
uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
uses: peter-evans/find-comment@v2
id: pr-comment
with:
issue-number: ${{ steps.pr-number.outputs.number }}
@@ -57,7 +50,7 @@ jobs:
body-includes: Added or changed icons
- name: Create or update comment
uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
uses: peter-evans/create-or-update-comment@v3
with:
comment-id: ${{ steps.pr-comment.outputs.comment-id }}
issue-number: ${{ steps.pr-number.outputs.number }}
-46
View File
@@ -1,46 +0,0 @@
name: Lucide Icons Checks
on:
pull_request:
paths:
- packages/icons/**
- packages/shared/**
- tools/build-icons/**
- tools/rollup-plugins/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build
run: pnpm --filter @lucide/icons build
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Test
run: pnpm --filter @lucide/icons test
+2 -5
View File
@@ -2,15 +2,12 @@ name: 'Pull Request Labeler'
on:
- pull_request_target
permissions: {}
jobs:
triage:
if: github.repository == 'lucide-icons/lucide'
permissions:
contents: read
pull-requests: write
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: actions/labeler@bf12e9b00b37c5c0ca2b87b79b2daf7891dbda13 # v7.0.0
- uses: actions/checkout@v6
- uses: actions/labeler@v5
+6 -7
View File
@@ -1,18 +1,17 @@
name: Linting PR code
name: Linting PR
on:
pull_request:
permissions:
contents: read
paths-ignore:
- icons/*.svg
jobs:
lint-code:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
+2 -6
View File
@@ -1,4 +1,4 @@
name: Linting PR title
name: Linting PR
on:
pull_request:
@@ -7,16 +7,12 @@ on:
- edited
- reopened
permissions:
contents: read
pull-requests: read # Required to read the PR title
jobs:
lint-pr-title:
name: PR Title Lint
runs-on: ubuntu-latest
steps:
- uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
- uses: amannn/action-semantic-pull-request@v5
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
+5 -38
View File
@@ -1,15 +1,9 @@
name: Linting Icons
on:
push:
branches:
- next
pull_request:
paths:
- 'icons/*'
- 'lab/*'
permissions: {}
jobs:
lint-filenames:
@@ -19,54 +13,27 @@ jobs:
permissions:
contents: read
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Get changed files
id: changed-files
uses: tj-actions/changed-files@9426d40962ed5378910ee2e21d5f8c6fcbf2dd96 # v47.0.6
uses: tj-actions/changed-files@v46
with:
files: |
icons/*
lab/*
files: icons/*
- name: Generate annotations
run: node ./scripts/lintFilenames.mts
env:
CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
check-lab-icons:
name: Check Lab Icons
runs-on: ubuntu-latest
permissions:
contents: read
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Check lab icons do not already exist in icons
run: node ./scripts/checkLabIcons.mts
lint-aliases:
name: Check Uniqueness of Aliases
runs-on: ubuntu-latest
permissions:
contents: read
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: actions/checkout@v6
- name: Check Uniqueness of Aliases
run: "! cat <(printf \"%s\\n\" icons/*.json | while read -r name; do basename \"$name\" .json; done) <(jq -cr 'select(.aliases) | .aliases[] | if type==\"string\" then . else .name end' icons/*.json) | sort | uniq -c | grep -ve '^\\s*1 '"
+41
View File
@@ -0,0 +1,41 @@
name: Lucide Angular checks
on:
pull_request:
paths:
- packages/lucide-angular/**
- tools/build-icons/**
- pnpm-lock.yaml
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build
run: pnpm --filter lucide-angular build
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Test
run: pnpm --filter lucide-angular test
+6 -12
View File
@@ -1,9 +1,6 @@
name: Lucide Astro Checks
on:
push:
branches:
- next
pull_request:
paths:
- packages/astro/**
@@ -11,16 +8,13 @@ on:
- tools/build-icons/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v2
- uses: actions/setup-node@v6
with:
node-version-file: 'package.json'
cache: 'pnpm'
@@ -34,9 +28,9 @@ jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
- uses: actions/setup-node@v3.8.1
with:
node-version-file: 'package.json'
cache: 'pnpm'
+6 -12
View File
@@ -1,24 +1,18 @@
name: Lucide font checks
on:
push:
branches:
- next
pull_request:
paths:
- tools/build-font/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
lucide-font:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -26,14 +20,14 @@ jobs:
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Execute unit tests for build-font
run: pnpm test:font
- name: Outline svg Icons
run: pnpm build:outline-icons
- name: Create font in ./lucide-font
run: pnpm build:font
- name: 'Upload to Artifacts'
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
uses: actions/upload-artifact@v4
with:
name: lucide-font
path: lucide-font
-31
View File
@@ -1,31 +0,0 @@
name: Lucide Lab checks
on:
pull_request:
paths:
- lab/**
- packages/lab/**
- packages/shared/**
- tools/build-icons/**
- tools/rollup-plugins/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build
run: pnpm --filter @lucide/lab build
+3 -9
View File
@@ -1,9 +1,6 @@
name: Lucide Preact Checks
on:
push:
branches:
- next
pull_request:
paths:
- packages/lucide-preact/**
@@ -12,16 +9,13 @@ on:
- tools/rollup-plugins/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
lucide-preact:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
+6 -12
View File
@@ -1,9 +1,6 @@
name: Lucide React Native checks
on:
push:
branches:
- next
pull_request:
paths:
- packages/lucide-react-native/**
@@ -12,16 +9,13 @@ on:
- tools/rollup-plugins/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -35,9 +29,9 @@ jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
+6 -34
View File
@@ -1,31 +1,22 @@
name: Lucide React Checks
on:
push:
branches:
- next
pull_request:
paths:
- packages/lucide-react/**
- integrations/lucide-react/**
- packages/shared/**
- tools/build-icons/**
- tools/rollup-plugins/**
- scripts/generateNextJSAliases.mjs
- package.json
- pnpm-workspace.yaml
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -39,9 +30,9 @@ jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -51,22 +42,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-react test
integration:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Install Chromium
run: pnpm --filter @lucide/integration-react-vite exec playwright install --with-deps chromium
- name: Run integration checks
run: pnpm test:integrations:react
+3 -9
View File
@@ -1,24 +1,18 @@
name: Lucide Shared Checks
on:
push:
branches:
- next
pull_request:
paths:
- packages/shared/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
+6 -12
View File
@@ -1,9 +1,6 @@
name: Lucide Solid Checks
on:
push:
branches:
- next
pull_request:
paths:
- packages/lucide-solid/**
@@ -12,16 +9,13 @@ on:
- tools/rollup-plugins/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -35,9 +29,9 @@ jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
+3 -6
View File
@@ -7,16 +7,13 @@ on:
- tools/build-icons/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
lucide-static:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
+6 -28
View File
@@ -1,9 +1,6 @@
name: Lucide Svelte 5 checks
on:
push:
branches:
- next
pull_request:
paths:
- packages/svelte/**
@@ -12,16 +9,13 @@ on:
- tools/rollup-plugins/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -35,9 +29,9 @@ jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -47,19 +41,3 @@ jobs:
- name: Test
run: pnpm --filter @lucide/svelte test
typecheck:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Test
run: pnpm --filter @lucide/svelte typecheck
+43
View File
@@ -0,0 +1,43 @@
name: Lucide Svelte checks
on:
pull_request:
paths:
- packages/lucide-svelte/**
- packages/shared/**
- tools/build-icons/**
- tools/rollup-plugins/**
- pnpm-lock.yaml
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build
run: pnpm --filter lucide-svelte build
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Test
run: pnpm --filter lucide-svelte test
+43
View File
@@ -0,0 +1,43 @@
name: Lucide Vue Next checks
on:
pull_request:
paths:
- packages/lucide-vue-next/**
- packages/shared/**
- tools/build-icons/**
- tools/rollup-plugins/**
- pnpm-lock.yaml
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build
run: pnpm --filter lucide-vue-next build
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Test
run: pnpm --filter lucide-vue-next test
-49
View File
@@ -1,49 +0,0 @@
name: Lucide Vue checks
on:
push:
branches:
- next
pull_request:
paths:
- packages/vue/**
- packages/shared/**
- tools/build-icons/**
- tools/rollup-plugins/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build
run: pnpm --filter @lucide/vue build
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Test
run: pnpm --filter @lucide/vue test
+6 -12
View File
@@ -1,9 +1,6 @@
name: Lucide checks
on:
push:
branches:
- next
pull_request:
paths:
- packages/lucide/**
@@ -11,16 +8,13 @@ on:
- tools/rollup-plugins/**
- pnpm-lock.yaml
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -34,9 +28,9 @@ jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -5,30 +5,27 @@ on:
paths:
- 'icons/*.svg'
permissions: {}
jobs:
generate-changed-icons-comment:
name: Generate Changed Icons Comment
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
permissions:
contents: read
pull-requests: write
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version-file: 'package.json'
- name: Get changed files
id: changed-files
uses: tj-actions/changed-files@9426d40962ed5378910ee2e21d5f8c6fcbf2dd96 # v47.0.6
uses: tj-actions/changed-files@v46
with:
files: icons/*.svg
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/setup-node@v6
- name: Install svgson for code preview (safer and faster than installing all deps)
run: npm install svgson@5.3.1 --force
@@ -43,7 +40,7 @@ jobs:
env:
CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
- uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
- uses: actions/upload-artifact@v4
with:
name: pr_number
path: pr/
@@ -1,16 +1,13 @@
name: Pull request metadata suggestions
name: Pull request tags suggestions
on:
pull_request_target:
paths:
- 'icons/*.json'
permissions: {}
jobs:
pull-request-metadata-suggestions:
name: Pull Request Metadata Suggestions
if: github.repository == 'lucide-icons/lucide'
pull-request-tags-suggestions:
name: Pull Request Tags Suggestions
runs-on: ubuntu-latest
permissions:
contents: read
@@ -19,11 +16,11 @@ jobs:
steps:
# We checkout the main branch of main repository for security reasons.
# This is to prevent the workflow from running on a forked repository.
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: actions/checkout@v6
with:
repository: lucide-icons/lucide
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -32,7 +29,7 @@ jobs:
run: pnpm install --frozen-lockfile
- name: Generate comment markup
run: node ./scripts/suggestMetaData.mts
run: node ./scripts/suggestTags.mts
env:
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
PULL_REQUEST_NUMBER: ${{ github.event.number }}
-146
View File
@@ -1,146 +0,0 @@
name: Release @lucide/lab
on:
push:
branches:
- main
paths:
- lab/**/*.svg
workflow_dispatch:
inputs:
release-type:
description: Release type
required: true
default: 'minor'
type: choice
options:
- patch
- minor
- major
permissions: {}
jobs:
create-release:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
permissions:
contents: write # Required to create the release and tag
outputs:
VERSION: ${{ steps.new-version.outputs.NEW_VERSION }}
SHOULD_RELEASE: ${{ steps.release-notes.outputs.SHOULD_RELEASE }}
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
with:
fetch-depth: 0 # Required to diff the lab icons against the previous tag
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Get latest tag
id: latest-tag
run: |
LATEST_TAG=$(git tag --list '@lucide/lab@*' --sort=-v:refname | head -n 1)
if [ -z "$LATEST_TAG" ]; then
echo "::error::No @lucide/lab@* tag found to release from."
exit 1
fi
echo "Latest tag: $LATEST_TAG"
echo "LATEST_TAG=$LATEST_TAG" >> $GITHUB_OUTPUT
- name: Create new version
id: new-version
run: |
NEW_VERSION=$(pnpm semver "${LATEST_TAG#@lucide/lab@}" -i "$RELEASE_TYPE")
echo "New version: $NEW_VERSION"
echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
env:
LATEST_TAG: ${{ steps.latest-tag.outputs.LATEST_TAG }}
RELEASE_TYPE: ${{ inputs.release-type || 'minor' }}
- name: Generate release notes
id: release-notes
run: |
NEW_TAG="@lucide/lab@$NEW_VERSION"
ADDED=$(git diff --name-only --diff-filter=A "$LATEST_TAG" HEAD -- 'lab/*.svg' \
| xargs -r -n1 basename | sed 's/\.svg$//' | sort)
REMOVED=$(git diff --name-only --diff-filter=D "$LATEST_TAG" HEAD -- 'lab/*.svg' \
| xargs -r -n1 basename | sed 's/\.svg$//' | sort)
if [ -z "$ADDED" ] && [ "$EVENT_NAME" != 'workflow_dispatch' ]; then
echo "::notice::No icons were added to ./lab since $LATEST_TAG, skipping release."
echo "SHOULD_RELEASE=false" >> $GITHUB_OUTPUT
exit 0
fi
{
if [ -n "$ADDED" ]; then
printf '## New icons\n\n'
printf '%s\n' "$ADDED" | sed 's|.*|- `&`|'
printf '\n'
fi
if [ -n "$REMOVED" ]; then
printf '## Removed icons\n\nThese graduated to the core icon set.\n\n'
printf '%s\n' "$REMOVED" | sed 's|.*|- `&`|'
printf '\n'
fi
printf '**Full changelog**: https://github.com/lucide-icons/lucide/compare/%s...%s\n' "$LATEST_TAG" "$NEW_TAG"
} > lab-release-notes.md
cat lab-release-notes.md
echo "SHOULD_RELEASE=true" >> $GITHUB_OUTPUT
env:
LATEST_TAG: ${{ steps.latest-tag.outputs.LATEST_TAG }}
NEW_VERSION: ${{ steps.new-version.outputs.NEW_VERSION }}
EVENT_NAME: ${{ github.event_name }}
- name: Create Release
if: steps.release-notes.outputs.SHOULD_RELEASE == 'true'
uses: softprops/action-gh-release@efb35369e0ad2afab669f228072c1b0d510eae64 # v3.0.3
with:
tag_name: '@lucide/lab@${{ steps.new-version.outputs.NEW_VERSION }}'
name: '@lucide/lab@${{ steps.new-version.outputs.NEW_VERSION }}'
body_path: lab-release-notes.md
make_latest: 'false' # Never displace the core icon release as "Latest"
publish:
if: github.repository == 'lucide-icons/lucide' && needs.create-release.outputs.SHOULD_RELEASE == 'true'
runs-on: ubuntu-latest
needs: create-release
permissions:
id-token: write # Required for OIDC (npm provenance)
contents: read
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Set new version
run: pnpm version ${{ needs.create-release.outputs.VERSION }} --filter @lucide/lab --fail-if-no-match --no-git-tag-version
- name: Build
run: pnpm --filter @lucide/lab build
- name: Publish
run: pnpm --filter @lucide/lab publish --access public --no-git-checks --ignore-scripts --tag latest
env:
NPM_CONFIG_PROVENANCE: true
+47 -53
View File
@@ -11,19 +11,24 @@ on:
required: true
description: Version
type: string
tag:
description: NPM tag
default: 'latest'
type: string
permissions: {}
workflow_dispatch:
inputs:
version:
description: Version
required: true
permissions:
id-token: write # Required for OIDC
contents: write
jobs:
prepare:
pre-release:
if: github.repository == 'lucide-icons/lucide' && contains('["ericfennis", "karsa-mistmere", "jguddas"]', github.actor)
runs-on: ubuntu-latest
outputs:
VERSION: ${{ steps.get_version.outputs.VERSION }}
steps:
- name: Get the version
id: get_version
@@ -36,7 +41,7 @@ jobs:
release:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: prepare
needs: pre-release
permissions:
id-token: write # Required for OIDC
contents: read
@@ -48,18 +53,19 @@ jobs:
'lucide',
'lucide-react',
'lucide-react-native',
'lucide-vue-next',
'lucide-angular',
'lucide-preact',
'lucide-solid',
'lucide-svelte',
'@lucide/angular',
'@lucide/astro',
'@lucide/icons',
'@lucide/svelte',
'@lucide/vue',
]
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -68,7 +74,7 @@ jobs:
run: pnpm install --frozen-lockfile
- name: Set new version
run: pnpm version ${{ needs.prepare.outputs.VERSION }} --filter ${{ matrix.package }} --fail-if-no-match --no-git-tag-version
run: pnpm --filter ${{ matrix.package }} version --new-version ${{ needs.pre-release.outputs.VERSION }} --no-git-tag-version
- name: Build
run: pnpm --filter ${{ matrix.package }} build
@@ -77,27 +83,23 @@ jobs:
run: pnpm --filter ${{ matrix.package }} test
- name: Publish
run: pnpm --filter ${{ matrix.package }} publish --access public --no-git-checks --ignore-scripts --tag ${{ inputs.tag }}
run: pnpm --filter ${{ matrix.package }} publish --access public --no-git-checks --ignore-scripts
env:
NPM_CONFIG_PROVENANCE: true
lucide-static:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: [prepare, lucide-font]
needs: [pre-release, lucide-font]
permissions:
id-token: write # Required for OIDC
contents: read
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
with:
name: lucide-font
path: lucide-font
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: actions/download-artifact@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -106,7 +108,7 @@ jobs:
run: pnpm install --frozen-lockfile
- name: Set new version
run: pnpm version ${{ needs.prepare.outputs.VERSION }} --filter lucide-static --no-git-tag-version
run: pnpm --filter lucide-static version --new-version ${{ needs.pre-release.outputs.VERSION }} --no-git-tag-version
- name: Move Font
run: cp -r lucide-font packages/lucide-static/font
@@ -115,20 +117,18 @@ jobs:
run: pnpm --filter lucide-static build
- name: Publish
run: pnpm --filter lucide-static publish --no-git-checks --ignore-scripts --tag ${{ inputs.tag }} --access public
run: pnpm --filter lucide-static publish --no-git-checks
env:
NPM_CONFIG_PROVENANCE: true
lucide-font:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: prepare
permissions:
contents: read
needs: pre-release
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
- uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
@@ -136,43 +136,37 @@ jobs:
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Execute unit tests for build-font
run: pnpm test:font
- name: Outline svg Icons
run: pnpm build:outline-icons
- name: Create font in ./lucide-font
run: pnpm build:font --saveCodePoints
env:
BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
run: pnpm build:font
- name: 'Upload to Artifacts'
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
uses: actions/upload-artifact@v4
with:
name: lucide-font
path: lucide-font
post-release:
if: github.repository == 'lucide-icons/lucide' && github.event_name != 'workflow_call'
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: [prepare, lucide-font]
needs: [pre-release, lucide-font]
permissions:
contents: write # Required to upload the release assets
id-token: write # Required for OIDC
contents: write
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
with:
name: lucide-font
path: lucide-font
- uses: actions/checkout@v6
- uses: actions/download-artifact@v4
- name: Zip font and icons
run: |
zip -r lucide-font-${{ needs.prepare.outputs.VERSION }}.zip lucide-font
zip -r lucide-icons-${{ needs.prepare.outputs.VERSION }}.zip icons
zip -r lucide-font-${{ needs.pre-release.outputs.VERSION }}.zip lucide-font
zip -r lucide-icons-${{ needs.pre-release.outputs.VERSION }}.zip icons
- name: Release zip and fonts
uses: softprops/action-gh-release@efb35369e0ad2afab669f228072c1b0d510eae64 # v3.0.3
uses: softprops/action-gh-release@v2
with:
tag_name: ${{ needs.prepare.outputs.VERSION }}
tag_name: ${{ needs.pre-release.outputs.VERSION }}
files: |
lucide-font-${{ needs.prepare.outputs.VERSION }}.zip
lucide-icons-${{ needs.prepare.outputs.VERSION }}.zip
lucide-font-${{ needs.pre-release.outputs.VERSION }}.zip
lucide-icons-${{ needs.pre-release.outputs.VERSION }}.zip
-45
View File
@@ -1,45 +0,0 @@
name: Weekly Repo Report
on:
workflow_dispatch:
# Run this workflow every Monday at 07:00 UTC
schedule:
- cron: '0 7 * * 1'
permissions:
contents: read
jobs:
weekly-summary:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
steps:
- name: Set up Node.js environment
uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
with:
node-version: 24
- name: Install Copilot CLI
run: npm install -g @github/copilot
- name: Run the prompt
env:
COPILOT_GITHUB_TOKEN: ${{ secrets.COPILOT_GITHUB_TOKEN }}
run: |
copilot -p "${{ vars.REPO_REPORT_PROMPT }} Write the details to summary.md" --allow-tool='shell(git:*)' --allow-tool=write --no-ask-user
cat summary.md >> "$GITHUB_STEP_SUMMARY"
- name: Post report to Discord (private channel)
env:
DISCORD_WEBHOOK_URL: ${{ secrets.LUCIDE_DISCORD_WEBHOOK }}
run: |
jq -Rs '{
embeds: [{
title: "📊 Weekly Repo Report",
description: (.[0:4096]),
color: 5814783
}]
}' summary.md > payload.json
curl -sS --fail -X POST \
-H "Content-Type: application/json" \
-d @payload.json \
"$DISCORD_WEBHOOK_URL"
+5 -7
View File
@@ -1,27 +1,25 @@
name: Request Review
name: 'Request Review'
on:
pull_request:
pull_request_target:
types: [opened]
paths:
- icons/*.svg
permissions: {}
jobs:
request-review:
if: github.repository == 'lucide-icons/lucide' && github.event.pull_request.draft == false
if: github.event.pull_request.draft == false
runs-on: ubuntu-latest
permissions:
contents: read
pull-requests: write
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
- uses: actions/checkout@v6
with:
fetch-depth: 0
ref: refs/pull/${{ github.event.pull_request.number }}/merge
- name: Get changed files
id: changed-files
uses: tj-actions/changed-files@9426d40962ed5378910ee2e21d5f8c6fcbf2dd96 # v47.0.6
uses: tj-actions/changed-files@v41
with:
files: icons/*.svg
- run: |
+3 -24
View File
@@ -3,10 +3,9 @@
.next
.obsidian
.now
.cache
.idea
.env
node_modules
.pnpm-store
dist
build
sandbox
@@ -14,40 +13,25 @@ stash
coverage
stats
*.log
*.tsbuildinfo
integrations/**/.react-router
integrations/**/.vitest-attachments
integrations/**/__screenshots__
outlined
lucide-font
packages/**/src/icons/*.js
packages/**/src/icons/*.ts
packages/**/src/icons/*.tsx
packages/**/src/aliases/*.ts
packages/**/src/aliases.ts
!packages/**/src/aliases/index.ts
packages/**/src/utils/*.ts
!packages/shared/src/utils/*.ts
!packages/shared/src/build/
!packages/shared/src/build/*.ts
packages/shared/src/build/types.d.ts
packages/**/src/dynamicIconImports.ts
packages/**/DynamicIcon.d.ts
packages/**/dynamicIconImports.js
packages/**/dynamicIconImports.mjs
packages/**/dynamicIconImports.d.ts
packages/**/dynamicIconImports.d.mts
packages/**/dynamicIconImports.js.map
packages/**/dynamicIconImports.mjs.map
packages/**/dynamic.d.ts
packages/**/dynamic.d.mts
packages/**/dynamic.mjs.map
packages/**/dynamic.mjs
packages/**/LICENSE
categories.json
tags.json
.vercel
package-lock.json
# docs
docs/.vitepress/cache
@@ -56,16 +40,11 @@ docs/.vitepress/.temp
docs/.vitepress/data/iconNodes
docs/.vitepress/data/iconMetaData.ts
docs/.vitepress/data/releaseMetaData.json
docs/.vitepress/data/releaseMetadata
docs/.vitepress/data/releaseMetaData
docs/.vitepress/data/categoriesData.json
docs/.vitepress/data/iconDetails
docs/.vitepress/data/relatedIcons.json
docs/.vitepress/data/brandStopwords.json
docs/.vitepress/data/iconPopularity
docs/.vitepress/data/lab/iconNodes
docs/.vitepress/data/lab/iconMetaData.ts
docs/.vitepress/data/lab/iconPopularity
docs/.vercel
docs/.nitro
docs/public/og/**
!docs/public/og/general.png
.gitignore
+3
View File
@@ -1,2 +1,5 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm lint-staged
pnpm checkIcons
+4 -12
View File
@@ -7,8 +7,8 @@ docs/.vitepress/cache
docs/.vitepress/data
docs/.nitro
# @lucide/angular
packages/angular/.angular
# lucide-angular
packages/lucide-angular/.angular/cache
# lucide-static
packages/lucide-static/icons
@@ -17,15 +17,7 @@ packages/lucide-static/sprite.svg
packages/lucide-static/tags.json
packages/lucide-static/icon-nodes.json
packages/lucide-static/font
packages/svelte/.svelte-kit
# integration test artifacts and generated routes
integrations/**/.react-router
integrations/**/next-env.d.ts
integrations/**/routeTree.gen.ts
integrations/**/.vitest-attachments
integrations/**/__screenshots__
# lucide-svelte
packages/svelte/src/icons/*.svelte
packages/svelte/.svelte-kit
packages/lucide-svelte/src/icons/*.svelte
packages/lucide-svelte/.svelte-kit
+2 -2
View File
@@ -1,6 +1,6 @@
{
"cSpell.words": ["devs", "linecap", "linejoin", "preact", "Preact"],
"cSpell.words": ["devs", "preact", "Preact"],
"eslint.enable": true,
"eslint.validate": ["javascript", "svg"],
"svg.preview.background": "editor"
"svg.preview.background": "transparent"
}
+2 -4
View File
@@ -1,6 +1,4 @@
# Brand Logos Statement
Our official stance on including brand logos in Lucide
# Our Official Stance on Including Brand Logos in Lucide
## TL;DR
@@ -39,7 +37,7 @@ This means adding them could:
Lucide is all about **visual consistency**.
Adding brand logos would:
- Break [our own design rules](https://lucide.dev/contribute/icon-design-guide#icon-design-principles) for shapes, proportions, and stroke.
- Break [our own design rules](https://lucide.dev/guide/design/icon-design-guide#icon-design-principles) for shapes, proportions, and stroke.
- Mix two fundamentally different categories of graphics (pictograms vs. corporate logos).
- Create a library where a subset of icons will always look "out of place".
+54 -70
View File
@@ -1,90 +1,74 @@
# Contributor Covenant Code of Conduct
This Code of Conduct outlines our expectations for participant behavior as well as the consequences for unacceptable behavior within our community. We are committed to providing a welcoming, safe, and inclusive environment for all members of our community.
## Our Pledge
We pledge to make our community welcoming, safe, and equitable for all.
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.
We are committed to fostering an environment that respects and promotes the dignity, rights, and contributions of all individuals, regardless of characteristics including race, ethnicity, caste, color, age, physical characteristics, neurodiversity, disability, sex or gender, gender identity or expression, sexual orientation, language, philosophy or religion, national or social origin, socio-economic position, level of education, or other status. The same privileges of participation are extended to everyone who participates in good faith and in accordance with this Covenant.
## Our Standards
## Encouraged Behaviors
Examples of behavior that contributes to creating a positive environment
include:
While acknowledging differences in social norms, we all strive to meet our community's expectations for positive behavior. We also understand that our words and actions may be interpreted differently than we intend based on culture, background, or native language.
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
With these considerations in mind, we agree to behave mindfully toward each other and act in ways that center our shared values, including:
Examples of unacceptable behavior by participants include:
1. Respecting the **purpose of our community**, our activities, and our ways of gathering.
2. Engaging **kindly and honestly** with others.
3. Respecting **different viewpoints** and experiences.
4. **Taking responsibility** for our actions and contributions.
5. Gracefully giving and accepting **constructive feedback**.
6. Committing to **repairing harm** when it occurs.
7. Behaving in other ways that promote and sustain the **well-being of our community**.
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
## Restricted Behaviors
We agree to restrict the following behaviors in our community. Instances, threats, and promotion of these behaviors are violations of this Code of Conduct.
1. **Harassment.** Violating explicitly expressed boundaries or engaging in unnecessary personal attention after any clear request to stop.
2. **Character attacks.** Making insulting, demeaning, or pejorative comments directed at a community member or group of people.
3. **Stereotyping or discrimination.** Characterizing anyone’s personality or behavior on the basis of immutable identities or traits.
4. **Sexualization.** Behaving in a way that would generally be considered inappropriately intimate in the context or purpose of the community.
5. **Violating confidentiality**. Sharing or acting on someone's personal or private information without their permission.
6. **Endangerment.** Causing, encouraging, or threatening violence or other harm toward any person or group.
7. Behaving in other ways that **threaten the well-being** of our community.
### Other Restrictions
1. **Misleading identity.** Impersonating someone else for any reason, or pretending to be someone else to evade enforcement actions.
2. **Failing to credit sources.** Not properly crediting the sources of content you contribute.
3. **Promotional materials**. Sharing marketing or other commercial content in a way that is outside the norms of the community.
4. **Irresponsible communication.** Failing to responsibly present content which includes, links or describes any other restricted behaviors.
## Reporting an Issue
Tensions can occur between community members even when they are trying their best to collaborate. Not every conflict represents a code of conduct violation, and this Code of Conduct reinforces encouraged behaviors and norms that can help avoid conflicts and minimize harm.
When an incident does occur, it is important to report it promptly. To report a possible violation, email: [info@lucide.dev](mailto:info@lucide.dev)
Community Moderators take reports of violations seriously and will make every effort to respond in a timely manner. They will investigate all reports of code of conduct violations, reviewing messages, logs, and recordings, or interviewing witnesses and other participants. Community Moderators will keep investigation and enforcement actions as transparent as possible while prioritizing safety and confidentiality. In order to honor these values, enforcement actions are carried out in private with the involved parties, but communicating to the whole community may be part of a mutually agreed upon resolution.
## Addressing and Repairing Harm
If an investigation by the Community Moderators finds that this Code of Conduct has been violated, the following enforcement ladder may be used to determine how best to repair harm, based on the incident's impact on the individuals involved and the community as a whole. Depending on the severity of a violation, lower rungs on the ladder may be skipped.
1) Warning
1) Event: A violation involving a single incident or series of incidents.
2) Consequence: A private, written warning from the Community Moderators.
3) Repair: Examples of repair include a private written apology, acknowledgement of responsibility, and seeking clarification on expectations.
2) Temporarily Limited Activities
1) Event: A repeated incidence of a violation that previously resulted in a warning, or the first incidence of a more serious violation.
2) Consequence: A private, written warning with a time-limited cooldown period designed to underscore the seriousness of the situation and give the community members involved time to process the incident. The cooldown period may be limited to particular communication channels or interactions with particular community members.
3) Repair: Examples of repair may include making an apology, using the cooldown period to reflect on actions and impact, and being thoughtful about re-entering community spaces after the period is over.
3) Temporary Suspension
1) Event: A pattern of repeated violation which the Community Moderators have tried to address with warnings, or a single serious violation.
2) Consequence: A private written warning with conditions for return from suspension. In general, temporary suspensions give the person being suspended time to reflect upon their behavior and possible corrective actions.
3) Repair: Examples of repair include respecting the spirit of the suspension, meeting the specified conditions for return, and being thoughtful about how to reintegrate with the community when the suspension is lifted.
4) Permanent Ban
1) Event: A pattern of repeated code of conduct violations that other steps on the ladder have failed to resolve, or a violation so serious that the Community Moderators determine there is no way to keep the community safe with this person as a member.
2) Consequence: Access to all community spaces, tools, and communication channels is removed. In general, permanent bans should be rarely used, should have strong reasoning behind them, and should only be resorted to if working through other remedies has failed to change the behavior.
3) Repair: There is no possible repair in cases of this severity.
This enforcement ladder is intended as a guideline. It does not limit the ability of Community Managers to use their discretion and judgment, in keeping with the best interests of our community.
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public or other spaces. Examples of representing our community include using an official email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at johnletey@gmail.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the Contributor Covenant, version 3.0, permanently available at [https://www.contributor-covenant.org/version/3/0/](https://www.contributor-covenant.org/version/3/0/).
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]
Contributor Covenant is stewarded by the Organization for Ethical Source and licensed under CC BY-SA 4.0. To view a copy of this license, visit [https://creativecommons.org/licenses/by-sa/4.0/](https://creativecommons.org/licenses/by-sa/4.0/)
For answers to common questions about Contributor Covenant, see the FAQ at [https://www.contributor-covenant.org/faq](https://www.contributor-covenant.org/faq). Translations are provided at [https://www.contributor-covenant.org/translations](https://www.contributor-covenant.org/translations). Additional enforcement and community guideline resources can be found at [https://www.contributor-covenant.org/resources](https://www.contributor-covenant.org/resources). The enforcement ladder was inspired by the work of [Mozilla’s code of conduct team](https://github.com/mozilla/inclusion).
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
+11 -12
View File
@@ -1,4 +1,5 @@
# Contribution Guide
# Contribution Guidelines
:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
@@ -18,33 +19,31 @@ Guidelines for pull requests:
- __Make sure the target of your pull request is the relevant branch__. Most of bug fixes or new feature should go to the `main` branch.
- __Include only related work__. If your pull request has unrelated commits, it won't be accepted.
### Contributing Icons
We love contributions of new icons from the community! If you want to contribute new icons, please follow the guidelines below.
### Icon Pull Requests
#### Guidelines
Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide.
Read it here: [ICON_GUIDELINES](https://lucide.dev/contribute/icon-design-guide).
Read it here: [ICON_GUIDELINES](https://lucide.dev/docs/icon-design-guide).
#### Lucide Studio
For formatting and adjusting SVG icons, [@jguddas](https://github.com/jguddas) made a great tool called [Lucide Studio](https://studio.lucide.dev/?utm_source=lucide.dev&utm_medium=contributing-guide). It is a web-based SVG editor that allows you to edit and adjust icons in the Lucide style. You can use it to create new icons or modify existing ones.
For formatting and adjusting SVG icons, [@jguddas](https://github.com/jguddas) made a great tool called [Lucide Studio](https://studio.lucide.dev/). It is a web-based SVG editor that allows you to edit and adjust icons in the Lucide style. You can use it to create new icons or modify existing ones.
#### Editor guides
Here you can find instructions on how to implement the guidelines with different vector graphics editors:
##### [Adobe Illustrator Guide](https://lucide.dev/contribute/illustrator-guide)
##### [Adobe Illustrator Guide](https://lucide.dev/docs/illustrator-guide)
You can also [download an Adobe Illustrator template](https://lucide.dev/templates/illustrator_template.ai).
You can also [download an Adobe Illustrator template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/illustrator_template.ai).
##### [Inkscape Guide](https://lucide.dev/contribute/inkscape-guide)
##### [Inkscape Guide](https://lucide.dev/docs/inkscape-guide)
##### [Figma Guide](https://lucide.dev/contribute/figma-guide)
##### [Figma Guide](https://lucide.dev/docs/figma-guide)
##### [Affinity Designer Guide](https://lucide.dev/contribute/affinity-designer-guide)
##### [Affinity Designer Guide](https://lucide.dev/guide/design/affinity-designer-guide)
#### Submitting Multiple Icons
@@ -192,7 +191,7 @@ Detailed documentation about: installation, guides, packages, design guides etc.
### Icons
All the icons of Lucide in SVG format. These will be used as source for all the packages and other distributions for the Lucide icons.
All the icons of lucide in SVG format. These will be used as source for all the packages and other distributions for the lucide icons.
### Packages
+3 -7
View File
@@ -1,6 +1,6 @@
ISC License
Copyright (c) 2026 Lucide Icons and Contributors
Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2023 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2025.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
@@ -16,13 +16,9 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
---
The following Lucide icons are derived from the Feather project:
The MIT License (MIT) (for portions derived from Feather)
airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
The MIT License (MIT) (for the icons listed above)
Copyright (c) 2013-present Cole Bemis
Copyright (c) 2013-2023 Cole Bemis
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
+16 -30
View File
@@ -7,9 +7,9 @@
</a>
</p>
<p align="center">
<a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-ISC-green" alt="license"></a>
<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.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/ci.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/ci.yml/badge.svg" alt="build status"></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">
@@ -26,26 +26,26 @@
# Lucide
Lucide is an open-source icon library that provides 1600+ 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.
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.
## Packages
| Logo | 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/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/react) · [Source](./packages/lucide-react) |
| <img src="https://lucide.dev/framework-logos/vue.svg" alt="Vue logo" width="48"> | **`@lucide/vue`** | [![npm](https://img.shields.io/npm/v/@lucide/vue)](https://www.npmjs.com/package/@lucide/vue) | ![NPM Downloads](https://img.shields.io/npm/dw/@lucide/vue) | [Docs](https://lucide.dev/guide/vue) · [Source](./packages/vue) |
| <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/svelte) · [Source](./packages/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/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/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/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/angular) · [Source](./packages/angular) |
| <img src="https://lucide.dev/framework-logos/astro.svg" alt="Astro logo" width="48"> | **`@lucide/astro`** | [![npm](https://img.shields.io/npm/v/@lucide/astro)](https://www.npmjs.com/package/@lucide/astro) | ![NPM Downloads](https://img.shields.io/npm/dw/@lucide/astro) | [Docs](https://lucide.dev/guide/astro) · [Source](./packages/astro) |
| <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/static) · [Source](./packages/lucide-static) |
| <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/astro.svg" alt="Astro logo" width="48"> | **`@lucide/astro`** | [![npm](https://img.shields.io/npm/v/@lucide/astro)](https://www.npmjs.com/package/@lucide/astro) | ![NPM Downloads](https://img.shields.io/npm/dw/@lucide/astro) | [Docs](https://lucide.dev/guide/packages/lucide-astro) · [Source](./packages/astro) |
| <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
The Lucide Figma plugin.
The lucide figma plugin.
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
@@ -80,8 +80,6 @@ Thank you to all the people who contributed to Lucide!
<img src="https://opencollective.com/lucide-icons/contributors.svg?width=800" />
</a>
[//]: <> (Sponsors)
## Sponsors
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
@@ -90,19 +88,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>
### Hero backers 🦸
<a href="https://zephyr-cloud.io/"><img src="docs/public/sponsors/zephyr-cloud.svg" width="180" alt="Zephyr Cloud – From idea to prod: fast micro-frontend delivery!" /></a>
### Awesome backers 🍺
<a href="https://github.com/pdfme/pdfme"><img src="docs/public/sponsors/pdfme.svg" width="180" alt="pdfme – Open-source PDF generation library built with TypeScript and React." /></a>
<a href="https://www.paxhistoria.co/"><img src="docs/public/sponsors/paxhistoria.svg?" width="180" alt="Pax Historia – An alternate history sandbox game" /></a>
### Backers ☕
<a href="https://www.fina.money/"><img src="docs/public/sponsors/fina-money.png" width="180" alt="Fina Money – Modular Finance Tracker" /></a>
### Other contributors 💸
You can find all our past and non-recurring financial contributors at [our Open Collective page](https://opencollective.com/lucide-icons).
<a href="https://github.com/pdfme/pdfme"><img src="docs/public/sponsors/pdfme.svg" width="180" alt="pdfme sponsor badge" /></a>
<a href="https://www.fina.money/"><img src="docs/public/sponsors/fina-money.png" width="180" alt="Fina Money sponsor badge" /></a>
+6 -5
View File
@@ -2,7 +2,6 @@
"adobe": "Adobe",
"airplay": "AirPlay",
"amazon": "Amazon",
"android": "Android",
"angular": "Angular",
"aws": "AWS",
"azure": "Azure",
@@ -54,8 +53,10 @@
"jira": "Jira",
"kotlin": "Kotlin",
"kubernetes": "Kubernetes",
"less": "Less",
"leetcode": "LeetCode",
"leet-code": "LeetCode",
"line": "LINE",
"linkedin": "LinkedIn",
"lua": "Lua",
"mariadb": "MariaDB",
@@ -68,7 +69,7 @@
"nestjs": "NestJS",
"netflix": "Netflix",
"netlify": "Netlify",
"nextjs": "Next.js",
"next": "Next.js",
"nodejs": "Node.js",
"notion": "Notion",
"nostr": "Nostr",
@@ -104,8 +105,7 @@
"shopify": "Shopify",
"skype": "Skype",
"slack": "Slack",
"snapchat": "Snapchat",
"solidjs": "SolidJS",
"solid": "SolidJS",
"soundcloud": "SoundCloud",
"spotify": "Spotify",
"sqlite": "SQLite",
@@ -144,5 +144,6 @@
"xbox": "Xbox",
"yarn": "Yarn",
"youtube": "YouTube",
"zig": "Zig"
"zig": "Zig",
"zoom": "Zoom"
}
+5
View File
@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Brands",
"icon": "facebook"
}
+1 -1
View File
@@ -1,5 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Emoji",
"icon": "face-slightly-smiling"
"icon": "smile"
}
+1 -1
View File
@@ -1,5 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Navigation & Places",
"title": "Navigation, Maps, and POIs",
"icon": "compass"
}
@@ -1,4 +1,3 @@
import { eventHandler, setResponseHeader } from 'h3';
import iconMetaData from '../../data/iconMetaData';
export default eventHandler((event) => {
-1
View File
@@ -1,4 +1,3 @@
import { eventHandler, setResponseHeader } from 'h3';
import iconNodes from '../../data/iconNodes/index.ts';
import { IconNodeWithKeys } from '../../theme/types';
import iconMetaData from '../../data/iconMetaData';
@@ -1,6 +1,6 @@
import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
import React from 'react';
import { createElement } from 'react';
import SvgPreview from '../../lib/SvgPreview/index.tsx';
import iconNodes from '../../data/iconNodes';
import createLucideIcon from 'lucide-react/src/createLucideIcon';
@@ -34,29 +34,36 @@ export default eventHandler((event) => {
const iconNode = iconNodes[backdropName];
const LucideIcon = createLucideIcon(backdropName, iconNode);
const svg = renderToStaticMarkup(<LucideIcon />);
const svg = renderToStaticMarkup(createElement(LucideIcon));
const backdropString = svg.replaceAll('\n', '').replace(/<svg[^>]*>|<\/svg>/g, '');
children.push(
<Backdrop
backdropString={backdropString}
src={src.replace(/<svg[^>]*>|<\/svg>/g, '')}
color="#777"
/>,
createElement(Backdrop, {
backdropString,
src: src.replace(/<svg[^>]*>|<\/svg>/g, ''),
color: '#777',
}),
);
}
const svg = Buffer.from(
// We can't use jsx here, is not supported here by nitro.
renderToString(
createElement(
SvgPreview,
{
src: src.replace(/<svg[^>]*>|<\/svg>/g, ''),
height,
width,
showGrid: true,
},
children,
),
),
).toString('utf8');
defaultContentType(event, 'image/svg+xml');
setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
return renderToString(
<SvgPreview
src={src.replace(/<svg[^>]*>|<\/svg>/g, '')}
showGrid
height={height}
width={width}
>
{children}
</SvgPreview>,
);
return svg;
});
@@ -1,6 +1,6 @@
import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
import React from 'react';
import { createElement } from 'react';
import Diff from '../../../lib/SvgPreview/Diff.tsx';
import iconNodes from '../../../data/iconNodes';
import createLucideIcon from 'lucide-react/src/createLucideIcon';
@@ -26,26 +26,21 @@ export default eventHandler((event) => {
const children = [];
const Icon = createLucideIcon(name, iconNodes[name]);
const oldSrc = iconNodes[name]
? renderToStaticMarkup(<Icon />)
? renderToStaticMarkup(createElement(createLucideIcon(name, iconNodes[name])))
.replaceAll('\n', '')
.replace(/<svg[^>]*>|<\/svg>/g, '')
: '';
const svg = Buffer.from(
// We can't use jsx here, is not supported here by nitro.
renderToString(
createElement(Diff, { oldSrc, newSrc, showGrid: true, height, width }, children),
),
).toString('utf8');
defaultContentType(event, 'image/svg+xml');
setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
return renderToString(
<Diff
oldSrc={oldSrc}
newSrc={newSrc}
showGrid
height={height}
width={width}
>
{children}
</Diff>,
);
return svg;
});
@@ -1,17 +1,22 @@
import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
import { Resvg, initWasm } from '@resvg/resvg-wasm';
import iconNodes from '../../../data/iconNodes';
import wasm from './loadWasm';
import { createElement } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import createLucideIcon from 'lucide-react/src/createLucideIcon';
import sharp from 'sharp';
var initializedResvg = initWasm(wasm);
export default eventHandler(async (event) => {
const { params = {} } = event.context;
await initializedResvg;
const imageSize = 96;
const name = params.data.split('/').at(-3);
const iconSizeString = params.data.split('/').at(-2);
const svgData = params.data.split('/').at(-1);
const iconSize = Math.min(parseInt(iconSizeString, 10) || imageSize, 256);
const iconSize = parseInt(iconSizeString, 10);
const data = svgData.slice(0, -4);
const prevSvg = iconNodes[name]
@@ -40,7 +45,9 @@ export default eventHandler(async (event) => {
)
.replace(/<\/svg>/, '</g></svg>');
const pngBuffer = await sharp(Buffer.from(svg)).png().toBuffer();
const resvg = new Resvg(svg, { background: '#000' });
const pngData = resvg.render();
const pngBuffer = Buffer.from(pngData.asPng());
defaultContentType(event, 'image/svg+xml');
setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
@@ -60,7 +67,7 @@ export default eventHandler(async (event) => {
<image
width="${imageSize}"
height="${prevSvg ? imageSize * 2 : imageSize}"
href="data:image/png;base64,${pngBuffer.toString('base64')}"
href="data:image/png;base64,${pngBuffer.toString('base64')}"
image-rendering="pixelated"
/>
</mask>
@@ -0,0 +1,16 @@
import fs from 'fs';
import module from 'node:module';
/* WASM_IMPORT */
let wasm;
if (process.env.NODE_ENV === 'development') {
const require = module.createRequire(import.meta.url);
wasm = fs.readFileSync(require.resolve('@resvg/resvg-wasm/index_bg.wasm'));
} else {
// @ts-ignore
wasm = resvg_wasm;
}
export default wasm;
@@ -0,0 +1,44 @@
import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
import { renderToString } from 'react-dom/server';
import { createElement } from 'react';
import SvgPreview from '../../../lib/SvgPreview/index.tsx';
import createLucideIcon, { IconNode } from 'lucide-react/src/createLucideIcon';
import { parseSync } from 'svgson';
export default eventHandler((event) => {
const { params } = event.context;
const [strokeWidth, svgData] = params.data.split('/');
const data = svgData.slice(0, -4);
const src = Buffer.from(data, 'base64').toString('utf8');
const Icon = createLucideIcon(
'icon',
parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`).children.map(
({ name, attributes }) => [name, attributes],
) as IconNode,
);
const svg = Buffer.from(
// We can't use jsx here, is not supported here by nitro.
renderToString(createElement(Icon, { strokeWidth }))
.replace(/fill\="none"/, 'fill="#fff"')
.replace(
/>/,
`><style>
@media screen and (prefers-color-scheme: light) {
svg { fill: transparent !important; }
}
@media screen and (prefers-color-scheme: dark) {
svg { stroke: #fff; fill: transparent !important; }
}
</style>`,
),
).toString('utf8');
defaultContentType(event, 'image/svg+xml');
setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
return svg;
});
@@ -1,37 +0,0 @@
import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
import { renderToString } from 'react-dom/server';
import React from 'react';
import Icon from 'lucide-react/src/Icon';
import type { IconNode } from 'lucide-react/src/types';
import { parseSync } from 'svgson';
export default eventHandler((event) => {
const { params } = event.context;
const [strokeWidth, svgData] = params.data.split('/');
const data = svgData.slice(0, -4);
const src = Buffer.from(data, 'base64').toString('utf8');
const iconNode = parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`).children.map(
({ name, attributes }) => [name, attributes],
) as IconNode;
defaultContentType(event, 'image/svg+xml');
setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
return renderToString(
<Icon
iconNode={iconNode}
strokeWidth={strokeWidth}
>
<style>
{`@media screen and (prefers-color-scheme: light) {
svg { fill: transparent !important; }
}
@media screen and (prefers-color-scheme: dark) {
svg { stroke: #fff; fill: transparent !important; }
}`}
</style>
</Icon>,
);
});
@@ -1,6 +1,6 @@
import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
import { renderToString } from 'react-dom/server';
import React from 'react';
import { createElement } from 'react';
import Diff from '../../../lib/SvgPreview/Diff.tsx';
export default eventHandler((event) => {
@@ -41,18 +41,15 @@ export default eventHandler((event) => {
return '';
}
const svg = Buffer.from(
// We can't use jsx here, is not supported here by nitro.
renderToString(
createElement(Diff, { oldSrc, newSrc, showGrid: true, height, width }, children),
),
).toString('utf8');
defaultContentType(event, 'image/svg+xml');
setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
return renderToString(
<Diff
oldSrc={oldSrc}
newSrc={newSrc}
showGrid
height={height}
width={width}
>
{children}
</Diff>,
);
return svg;
});
@@ -22,7 +22,6 @@ export default eventHandler((event) => {
const height = getQuery(event).height || undefined;
const color = getQuery(event).color || undefined;
const strokeWidth = getQuery(event).strokeWidth || undefined;
const background = getQuery(event).background || undefined;
const LucideIcon = createLucideIcon(params.iconName, iconNode);
@@ -33,7 +32,6 @@ export default eventHandler((event) => {
height,
color: color ? `#${color}` : undefined,
strokeWidth,
style: background ? { background } : undefined,
}),
),
).toString('utf8');
@@ -1,25 +0,0 @@
import { eventHandler, setResponseHeader } from 'h3';
import iconMetaData from '../../../data/lab/iconMetaData';
import iconPopularity from '../../../data/lab/iconPopularity';
import iconNodes from '../../../data/lab/iconNodes';
export default eventHandler((event) => {
setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
return Object.fromEntries(
Object.entries(iconMetaData).map(([iconName, iconData]) => {
// Remove $schema from the response
delete iconData['$schema'];
return [
iconName,
{
name: iconName,
iconNode: iconNodes[iconName],
popularity: iconPopularity[iconName]?.count ?? 0,
...iconData,
},
];
}),
);
});
@@ -1,14 +0,0 @@
import { eventHandler, setResponseHeader } from 'h3';
import iconMetaData from '../../../data/lab/iconMetaData';
export default eventHandler((event) => {
setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
for (const iconDetail in iconMetaData) {
// Remove $schema from the response
delete iconMetaData[iconDetail]['$schema'];
}
return iconMetaData;
});
@@ -1,30 +0,0 @@
import { eventHandler, getQuery, setResponseHeader } from 'h3';
import iconNodes from '../../../data/lab/iconNodes';
type IconNodeWithKeys = [elementName: string, attrs: Record<string, string> & { key?: string }][];
export default eventHandler((event) => {
const query = getQuery(event);
const withUniqueKeys = query.withUniqueKeys === 'true';
setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
if (withUniqueKeys) {
return iconNodes;
}
return Object.entries(iconNodes).reduce((acc, [name, iconNode]) => {
if (withUniqueKeys) {
return [name, iconNode];
}
const newIconNode = (iconNode as IconNodeWithKeys).map(([name, { key, ...attrs }]) => {
return [name, attrs];
});
acc[name] = newIconNode;
return acc;
}, {});
});
-1
View File
@@ -1,4 +1,3 @@
import { eventHandler, setResponseHeader } from 'h3';
import iconMetaData from '../../data/iconMetaData';
export default eventHandler((event) => {
+3
View File
@@ -0,0 +1,3 @@
export default eventHandler(() => {
return { nitro: 'Is Awesome! asda' };
});
+119 -61
View File
@@ -1,20 +1,6 @@
import { fileURLToPath, URL } from 'node:url';
import { defineConfig, UserConfig } from 'vitepress';
import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons';
import { defineConfig } from 'vitepress';
import sidebar from './sidebar';
import snackPlayer from './markdown/snackPlayer';
import sandpackPlugin from './markdown/sandpack';
import examplePlugin from './markdown/example';
import { readFile } from 'node:fs/promises';
import { resourcesSidebar } from './sidebar/resources';
import llmstxt from 'vitepress-plugin-llms';
import { transformPageData } from './transformPageData';
import getHeadConfig from './getHeadConfig';
const defaultSandpackCSS = await readFile(
fileURLToPath(new URL('./theme/sandpack-default.css', import.meta.url)),
'utf-8',
);
const title = 'Lucide';
const socialTitle = 'Lucide Icons';
@@ -23,26 +9,10 @@ const description = 'Beautiful & consistent icon toolkit made by the community.'
// https://vitepress.dev/reference/site-config
export default defineConfig({
title,
titleTemplate: ':title \u2013 Lucide',
description,
cleanUrls: true,
outDir: '.vercel/output/static',
srcExclude: ['**/README.md'],
markdown: {
config(md) {
md.use(groupIconMdPlugin);
md.use(snackPlayer);
md.use(examplePlugin);
md.use(sandpackPlugin, {
defaultFiles: {
'/styles.css': {
code: defaultSandpackCSS,
hidden: true,
},
},
});
},
},
vite: {
resolve: {
alias: [
@@ -58,35 +28,130 @@ export default defineConfig({
new URL('./theme/components/overrides/VPFooter.vue', import.meta.url),
),
},
{
find: /^.*\/VPCarbonAds\.vue$/,
replacement: fileURLToPath(
new URL('./theme/components/overrides/VPCarbonAds.vue', import.meta.url),
),
},
{
find: '~/.vitepress',
replacement: fileURLToPath(new URL('./', import.meta.url)),
},
],
},
plugins: [
groupIconVitePlugin(),
llmstxt({
ignoreFiles: [
'code-of-conduct.md',
'index.md',
'packages.md',
'showcase.md',
'brand-logo-statement.md',
'icons/**', // Not working, need investigation
],
}) as unknown as UserConfig['vite']['plugins'][0],
],
},
head: getHeadConfig({ title, description, socialTitle }),
transformPageData,
head: [
[
'link',
{
rel: 'preconnect',
href: 'https://analytics.lucide.dev',
},
],
[
'script',
{
src: 'https://analytics.lucide.dev/js/script.js',
'data-domain': 'lucide.dev',
defer: '',
},
],
[
'meta',
{
property: 'og:locale',
content: 'en_US',
},
],
[
'meta',
{
property: 'og:type',
content: 'website',
},
],
[
'meta',
{
property: 'og:site_name',
content: title,
},
],
[
'meta',
{
property: 'og:title',
content: socialTitle,
},
],
[
'meta',
{
property: 'og:description',
content: description,
},
],
[
'meta',
{
property: 'og:url',
content: 'https://lucide.dev',
},
],
[
'meta',
{
property: 'og:image',
content: 'https://lucide.dev/og.png',
},
],
[
'meta',
{
property: 'og:image:width',
content: '1200',
},
],
[
'meta',
{
property: 'og:image:height',
content: '630',
},
],
[
'meta',
{
property: 'og:image:type',
content: 'image/png',
},
],
[
'meta',
{
property: 'twitter:card',
content: 'summary_large_image',
},
],
[
'meta',
{
property: 'twitter:title',
content: socialTitle,
},
],
[
'meta',
{
property: 'twitter:description',
content: description,
},
],
[
'meta',
{
property: 'twitter:image',
content: 'https://lucide.dev/og.png',
},
],
],
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
logo: {
light: '/logo.light.svg',
dark: '/logo.dark.svg',
@@ -94,16 +159,9 @@ export default defineConfig({
nav: [
{ text: 'Icons', link: '/icons/' },
{ text: 'Guide', link: '/guide/' },
{
text: 'Resources',
items: [
...resourcesSidebar[0].items,
{ text: 'Contributing icons', link: '/contribute/icons/' },
],
},
{ text: 'Packages', link: '/packages' },
{ text: 'Showcase', link: '/showcase' },
{ text: 'Merch', link: 'https://merch.lucide.dev/' },
{ text: 'License', link: '/license' },
],
sidebar,
socialLinks: [
@@ -112,7 +170,7 @@ export default defineConfig({
],
footer: {
message: 'Released under the ISC License.',
copyright: `Copyright © ${new Date().getFullYear()} Lucide Icons`,
copyright: `Copyright © ${new Date().getFullYear()} Lucide Contributors`,
},
editLink: {
pattern: 'https://github.com/lucide-icons/lucide/edit/main/docs/:path',
-79
View File
@@ -1,79 +0,0 @@
import { PageData } from 'vitepress';
import fs from 'node:fs/promises';
import { cwd } from 'node:process';
import { join } from 'node:path';
import sharp from 'sharp';
const generalSVGTemplate = fs.readFile(join(cwd(), '.vitepress/lib/guideOGTemplate.svg'), 'utf-8');
export async function createGeneralOGImage({ title, description, relativePath }: PageData) {
const fileName = relativePath.replace(/\.md$/, '.png').replace(/\//g, '-');
const path = join(cwd(), 'public/og', fileName);
let desc = description.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
if (!desc) {
desc = '';
}
const lines = desc.replace(/(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n').split('\n');
const data = {
title: title,
line1: lines[0] || '',
line2: lines[1] || '',
line3: lines[2] || '',
line4: lines[3] || '',
};
const svgTemplate = await generalSVGTemplate;
const svg = svgTemplate.replace(/\{\{([^}]+)\}\}/g, (_, name: keyof typeof data) => data[name]);
console.log(`Generating ${fileName}`);
try {
await sharp(Buffer.from(svg))
.resize(1200 * 1.1, 630 * 1.1)
.png()
.toFile(path);
} catch (e) {
console.error('Error generating', { filename: path, ...data, svg });
console.error(e);
}
return `/og/${fileName}`;
}
const iconSVGTemplate = fs.readFile(join(cwd(), '.vitepress/lib/iconOGTemplate.svg'), 'utf-8');
export async function createIconOGImage(iconName: string, tags: string[]) {
const path = join(cwd(), 'public/og', `icon-${iconName}.png`);
let iconSVG = await fs.readFile(join(cwd(), `../icons/${iconName}.svg`), 'utf-8');
iconSVG = iconSVG
.replace('width="24"', 'width="320"')
.replace('height="24"', 'height="320"')
.replace('currentColor', '#dfdfd6')
.replace(
'xmlns="http://www.w3.org/2000/svg"',
'xmlns="http://www.w3.org/2000/svg" x="62" y="66"',
);
const data = {
name: iconName,
tags: tags.join(' • ').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, '&amp;'),
iconSVG,
};
const svgTemplate = await iconSVGTemplate;
const svg = svgTemplate.replace(/\{\{([^}]+)\}\}/g, (_, name: keyof typeof data) => data[name]);
console.log(`Generating ${path}`);
try {
await sharp(Buffer.from(svg))
.resize(1200 * 1.1, 630 * 1.1)
.png()
.toFile(path);
} catch (e) {
console.error('Error generating', { filename: path, ...data, svg });
console.error(e);
}
return `/og/icon-${iconName}.png`;
}
+5 -1
View File
@@ -15,6 +15,10 @@
"name": "arrows",
"title": "Arrows"
},
{
"name": "brands",
"title": "Brands"
},
{
"name": "buildings",
"title": "Buildings"
@@ -97,7 +101,7 @@
},
{
"name": "navigation",
"title": "Navigation & Places"
"title": "Navigation, Maps, and POIs"
},
{
"name": "notifications",
+16
View File
@@ -46,5 +46,21 @@
"light": "/company-logos/open-collective-light.svg",
"dark": "/company-logos/open-collective-dark.svg"
}
},
{
"name": "Super",
"url": "https://super.so",
"image": {
"light": "/company-logos/super-light.svg",
"dark": "/company-logos/super-dark.svg"
}
},
{
"name": "Noodle",
"url": "https://noodle.run/",
"image": {
"light": "/company-logos/noodle-light.svg",
"dark": "/company-logos/noodle-dark.svg"
}
}
]
+21 -51
View File
@@ -18,7 +18,6 @@
"lucide-react": {
"order": 1,
"icon": "react",
"docsAlias": "react",
"shields": [
{
"alt": "npm",
@@ -32,46 +31,41 @@
}
]
},
"@lucide/vue": {
"lucide-vue-next": {
"order": 2,
"icon": "vue",
"docsAlias": "vue",
"packageDirname": "vue",
"icon": "vue-next",
"shields": [
{
"alt": "npm",
"src": "https://img.shields.io/npm/v/@lucide/vue",
"href": "https://www.npmjs.com/package/@lucide/vue"
"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",
"href": "https://www.npmjs.com/package/@lucide/vue"
"src": "https://img.shields.io/npm/dw/lucide-vue-next",
"href": "https://www.npmjs.com/package/lucide-vue-next"
}
]
},
"@lucide/svelte": {
"lucide-svelte": {
"order": 3,
"icon": "svelte",
"docsAlias": "svelte",
"packageDirname": "svelte",
"shields": [
{
"alt": "npm",
"src": "https://img.shields.io/npm/v/@lucide/svelte",
"href": "https://www.npmjs.com/package/@lucide/svelte"
"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"
"src": "https://img.shields.io/npm/dw/lucide-svelte",
"href": "https://www.npmjs.com/package/lucide-svelte"
}
]
},
"lucide-solid": {
"order": 4,
"icon": "solid",
"docsAlias": "solid",
"shields": [
{
"alt": "npm",
@@ -88,7 +82,6 @@
"lucide-react-native": {
"order": 5,
"icon": "react-native",
"docsAlias": "react-native",
"shields": [
{
"alt": "npm",
@@ -102,28 +95,25 @@
}
]
},
"@lucide/angular": {
"lucide-angular": {
"order": 6,
"icon": "angular",
"docsAlias": "angular",
"packageDirname": "angular",
"shields": [
{
"alt": "npm",
"src": "https://img.shields.io/npm/v/@lucide/angular",
"href": "https://www.npmjs.com/package/@lucide/angular"
"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"
"src": "https://img.shields.io/npm/dw/lucide-angular",
"href": "https://www.npmjs.com/package/lucide-angular"
}
]
},
"lucide-preact": {
"order": 8,
"order": 7,
"icon": "preact",
"docsAlias": "preact",
"shields": [
{
"alt": "npm",
@@ -138,9 +128,9 @@
]
},
"@lucide/astro": {
"docsAlias": "astro",
"docsAlias": "lucide-astro",
"packageDirname": "astro",
"order": 9,
"order": 8,
"icon": "astro",
"iconDark": "astro-dark",
"shields": [
@@ -157,9 +147,8 @@
]
},
"lucide-static": {
"order": 10,
"order": 9,
"icon": "svg",
"docsAlias": "static",
"shields": [
{
"alt": "npm",
@@ -172,24 +161,5 @@
"href": "https://www.npmjs.com/package/lucide-static"
}
]
},
"@lucide/icons": {
"hide": true,
"docsAlias": "icons",
"packageDirname": "icons",
"order": 10,
"icon": "ts",
"shields": [
{
"alt": "npm",
"src": "https://img.shields.io/npm/v/@lucide/icons",
"href": "https://www.npmjs.com/package/@lucide/icons"
},
{
"alt": "npm",
"src": "https://img.shields.io/npm/dw/@lucide/icons",
"href": "https://www.npmjs.com/package/@lucide/icons"
}
]
}
}
}
@@ -117,7 +117,7 @@
},
{
"name": "lucide-slint",
"description": "Implementation of the Lucide icon library for Slint.",
"description": "Implementation of the lucide icon library for Slint.",
"icon": "/framework-logos/slint.svg",
"shields": [
{
@@ -171,62 +171,5 @@
],
"source": "https://github.com/heyvito/lucide-rails",
"documentation": "https://github.com/heyvito/lucide-rails/blob/master/README.md"
},
{
"name": "lucide-web-components",
"description": "Implementation of Lucide icons in Web Components custom elements.",
"icon": "/framework-logos/web-components.svg",
"shields": [
{
"alt": "Latest Stable Version",
"src": "https://img.shields.io/npm/v/@dile/iconlib",
"href": "https://dile-components.com/icons/lucide-icons/"
},
{
"alt": "Total Downloads",
"src": "https://img.shields.io/npm/dt/@dile/iconlib",
"href": "https://dile-components.com/icons/lucide-icons/"
}
],
"source": "https://github.com/Polydile/dile-components",
"documentation": "https://github.com/Polydile/dile-components/blob/master/packages/iconlib/README.md"
},
{
"name": "strapi-lucide-icons",
"description": "Lucide icon picker custom field for Strapi.",
"icon": "/framework-logos/strapi.svg",
"shields": [
{
"alt": "Latest Stable Version",
"src": "https://img.shields.io/npm/v/strapi-lucide-icons",
"href": "https://www.npmjs.com/package/strapi-lucide-icons"
},
{
"alt": "Total Downloads",
"src": "https://img.shields.io/npm/dw/strapi-lucide-icons",
"href": "https://www.npmjs.com/package/strapi-lucide-icons"
}
],
"source": "https://github.com/shx08/strapi-lucide-icons",
"documentation": "https://github.com/shx08/strapi-lucide-icons/blob/main/README.md"
},
{
"name": "lucide-lit",
"description": "Implementation of Lucide icons as Lit web components.",
"icon": "/framework-logos/lit.svg",
"shields": [
{
"alt": "Latest Stable Version",
"src": "https://img.shields.io/npm/v/@gyeonghokim/lucide-lit",
"href": "https://www.npmjs.com/package/@gyeonghokim/lucide-lit"
},
{
"alt": "Total Downloads",
"src": "https://img.shields.io/npm/dw/@gyeonghokim/lucide-lit",
"href": "https://www.npmjs.com/package/@gyeonghokim/lucide-lit"
}
],
"source": "https://github.com/GyeongHoKim/lucide-lit",
"documentation": "https://github.com/GyeongHoKim/lucide-lit/blob/main/README.md"
}
]
-127
View File
@@ -1,127 +0,0 @@
import { HeadConfig } from 'vitepress';
const getHeadConfig = ({
title,
description,
socialTitle,
}: {
title: string;
description: string;
socialTitle?: string;
}): HeadConfig[] => [
[
'link',
{
rel: 'preconnect',
href: 'https://analytics.lucide.dev',
},
],
[
'script',
{
src: 'https://analytics.lucide.dev/js/script.js',
'data-domain': 'lucide.dev',
defer: '',
},
],
[
'meta',
{
property: 'og:locale',
content: 'en_US',
},
],
[
'meta',
{
property: 'og:type',
content: 'website',
},
],
[
'meta',
{
property: 'og:site_name',
content: title,
},
],
[
'meta',
{
property: 'og:title',
content: socialTitle,
},
],
[
'meta',
{
property: 'og:description',
content: description,
},
],
[
'meta',
{
property: 'og:url',
content: 'https://lucide.dev',
},
],
[
'meta',
{
property: 'og:image',
content: 'https://lucide.dev/og.png',
},
],
[
'meta',
{
property: 'og:image:width',
content: '1200',
},
],
[
'meta',
{
property: 'og:image:height',
content: '630',
},
],
[
'meta',
{
property: 'og:image:type',
content: 'image/png',
},
],
[
'meta',
{
property: 'twitter:card',
content: 'summary_large_image',
},
],
[
'meta',
{
property: 'twitter:title',
content: socialTitle,
},
],
[
'meta',
{
property: 'twitter:description',
content: description,
},
],
[
'meta',
{
property: 'twitter:image',
content: 'https://lucide.dev/og.png',
},
],
];
export default getHeadConfig;
-46
View File
@@ -1,46 +0,0 @@
import { PageData } from 'vitepress';
export default async function getStructuredData(iconName: string, pageData: PageData) {
const url = `https://lucide.dev/icons/${iconName}`;
return {
'@context': 'https://schema.org',
'@type': 'WebPage',
'@id': url,
name: pageData.title,
description: pageData.description,
url,
inLanguage: 'en',
isPartOf: {
'@type': 'WebSite',
name: 'Lucide Icons',
url: 'https://lucide.dev',
},
breadcrumb: {
'@type': 'BreadcrumbList',
itemListElement: [
{ '@type': 'ListItem', position: 1, name: 'Icons', item: 'https://lucide.dev/icons' },
{ '@type': 'ListItem', position: 2, name: iconName, item: url },
],
},
mainEntity: {
'@type': 'ImageObject',
'@id': `${url}#icon`,
name: iconName,
// TODO: Add support for description extraction from icon metadata
// description: 'An ...SVG icon from the Lucide icon set.',
contentUrl: `https://lucide.dev/api/icons/${iconName}}?width=24&height=24&background=white`,
thumbnailUrl: `https://lucide.dev/api/icons/${iconName}}?width=256&height=256&background=white`,
encodingFormat: 'image/svg+xml',
keywords: pageData.params?.tags,
width: 24,
height: 24,
creator: {
'@type': 'Organization',
name: 'Lucide Icons',
},
datePublished: pageData?.params?.createdRelease?.date,
dateModified: pageData?.params?.changedRelease?.date,
},
};
}
@@ -3,6 +3,7 @@ import pathToPoints from './path-to-points';
import { Path, PathProps } from './types';
export const GapViolationHighlight = ({
radius,
stroke,
strokeWidth,
strokeOpacity,
+13 -16
View File
@@ -293,7 +293,7 @@ const Radii = ({
...props
}: { paths: Path[] } & PathProps<
'strokeWidth' | 'stroke' | 'strokeDasharray' | 'strokeOpacity',
never
any
>) => {
return (
<g
@@ -361,12 +361,12 @@ const Radii = ({
const Handles = ({
paths,
...props
}: { paths: Path[] } & PathProps<'strokeWidth' | 'stroke' | 'strokeOpacity', never>) => (
}: { paths: Path[] } & PathProps<'strokeWidth' | 'stroke' | 'strokeOpacity', any>) => (
<g
className="svg-preview-handles-group"
{...props}
>
{paths.map(({ prev, next, cp1, cp2 }, i) => (
{paths.map(({ c, prev, next, cp1, cp2 }, i) => (
<React.Fragment key={i}>
{cp1 && <path d={`M${prev.x} ${prev.y} ${cp1.x} ${cp1.y}`} />}
{cp1 && (
@@ -389,18 +389,15 @@ const Handles = ({
</g>
);
interface SvgPreviewProps extends React.SVGProps<SVGSVGElement> {
height?: number;
width?: number;
src: string | ReturnType<typeof getPaths>;
showGrid?: boolean;
children?: React.ReactNode;
}
const SvgPreview = (
{ src, children, height = 24, width = 24, showGrid = false, ...props }: SvgPreviewProps,
ref,
) => {
const SvgPreview = React.forwardRef<
SVGSVGElement,
{
height?: number;
width?: number;
src: string | ReturnType<typeof getPaths>;
showGrid?: boolean;
} & React.SVGProps<SVGSVGElement>
>(({ src, children, height = 24, width = 24, showGrid = false, ...props }, ref) => {
const subGridSize =
Math.max(height, width) % 3 === 0
? Math.max(height, width) > 24
@@ -497,7 +494,7 @@ const SvgPreview = (
{children}
</svg>
);
};
});
SvgPreview.displayName = 'SvgPreview';
@@ -1,4 +1,4 @@
import { memoize } from 'lodash-es';
import memoize from 'lodash/memoize';
import SVGPathCommander from 'svg-path-commander';
import { Path } from './types';
@@ -12,9 +12,7 @@ function pathToPoints({ d, prev, next }: Path, interval = 1) {
points.push(commander.getPointAtLength(i));
}
points.push(next);
} catch (err) {
console.warn(`Failed to convert path to points for d="${d}": ${err}`);
}
} catch (err) {}
return points;
}
+1 -1
View File
@@ -8,7 +8,7 @@ export type Path = {
prev: Point;
next: Point;
isStart: boolean;
circle?: { x: number; y: number; r: number; tangentIntersection?: Point };
circle?: { x: number; y: number; r: number };
cp1?: Point;
cp2?: Point;
c: ReturnType<typeof getCommands>[number];
+5 -3
View File
@@ -1,8 +1,10 @@
import { INode, parseSync } from 'svgson';
// @ts-ignore
import toPath from 'element-to-path';
// @ts-ignore
import { SVGPathData, encodeSVGPath } from 'svg-pathdata';
import { Path, Point } from './types';
import { memoize } from 'lodash-es';
import memoize from 'lodash/memoize';
function assertNever(x: never): never {
throw new Error('Unknown type: ' + x['type']);
@@ -55,7 +57,7 @@ export const getCommands = (src: string) =>
.flatMap(({ d, name }, idx) =>
new SVGPathData(d)
.toAbs()
// @ts-expect-error `commands` is typed as a union of command types svgson does not narrow
// @ts-ignore
.commands.map((c, cIdx) => ({ ...c, id: idx, idx: cIdx, name })),
);
@@ -242,7 +244,7 @@ const getPaths = (src: string) => {
break;
}
default: {
// @ts-expect-error every command type is handled above, so `c` is not `never` here
// @ts-ignore
assertNever(c);
}
}
@@ -13,11 +13,11 @@ const getIconCodes = (): CodeExampleType => {
title: 'Vanilla',
code: `\
<script>
import { createIcons, $PascalCase } from 'lucide';
import { createIcons, $CamelCase } from 'lucide';
createIcons({
icons: {
$PascalCase
$CamelCase
}
});
</script>
@@ -43,7 +43,7 @@ export default App;
language: 'vue',
title: 'Vue',
code: `<script setup>
import { $PascalCase } from '@lucide/vue';
import { $PascalCase } from 'lucide-vue-next';
</script>
<template>
@@ -113,15 +113,16 @@ import { LucideAngularModule, $PascalCase } from 'lucide-angular';
];
};
const highlighter = await createHighlighter({
themes: ['github-light', 'github-dark'],
langs: Object.keys(bundledLanguages),
});
export type ThemeOptions =
ThemeRegistration | { light: ThemeRegistration; dark: ThemeRegistration };
| ThemeRegistration
| { light: ThemeRegistration; dark: ThemeRegistration };
const highLightCode = async (code: string, lang: string, active?: boolean) => {
const highlighter = await createHighlighter({
themes: ['github-light', 'github-dark'],
langs: Object.keys(bundledLanguages),
});
export const highLightCode = async (code: string, lang: string, active?: boolean) => {
const highlightedCode = highlighter
.codeToHtml(code, {
lang,
@@ -1,4 +1,5 @@
import { highLightCode } from './createCodeExamples';
import { bundledLanguages, type ThemeRegistration } from 'shiki';
import { createHighlighter } from 'shiki';
type CodeExampleType = {
title: string;
@@ -104,17 +105,45 @@ import { $CamelCase } from '@lucide/lab';
@NgModule({
imports: [
LucideAngularModule.pick({ $PascalCase: $CamelCase })
LucideAngularModule.pick({ $CamelCase })
],
})
// app.component.html
<lucide-icon name="$PascalCase"></lucide-icon>
<lucide-icon name="$CamelCase"></lucide-icon>
`,
},
];
};
export type ThemeOptions =
| ThemeRegistration
| { light: ThemeRegistration; dark: ThemeRegistration };
const highLightCode = async (code: string, lang: string, active?: boolean) => {
const highlighter = await createHighlighter({
themes: ['github-light', 'github-dark'],
langs: Object.keys(bundledLanguages),
});
const highlightedCode = highlighter
.codeToHtml(code, {
lang,
themes: {
light: 'github-light',
dark: 'github-dark',
},
defaultColor: false,
})
.replace('shiki-themes', 'shiki-themes vp-code');
return `<div class="language-${lang} ${active ? 'active' : ''}">
<button title="Copy Code" class="copy"></button>
<span class="lang">${lang}</span>
${highlightedCode}
</div>`;
};
export default async function createCodeExamples() {
const codes = getIconCodes();
@@ -2,7 +2,8 @@ import { bundledLanguages, type ThemeRegistration } from 'shiki';
import { createHighlighter } from 'shiki';
export type ThemeOptions =
ThemeRegistration | { light: ThemeRegistration; dark: ThemeRegistration };
| ThemeRegistration
| { light: ThemeRegistration; dark: ThemeRegistration };
const highLightCode = async (code: string, lang: string, active?: boolean) => {
const highlighter = await createHighlighter({
-35
View File
@@ -1,35 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630" fill="none">
<g clip-path="url(#a)">
<path fill="#1b1b1f" d="M0 0h1200v630H0z" />
<text xml:space="preserve" fill="#fff" font-family="Inter, Helvetica, sans-serif" font-size="44" font-weight="600"
letter-spacing=".05em" style="white-space:pre">
<tspan x="62" y="118.5">{{title}}</tspan>
</text>
<text xml:space="preserve" fill="#ebebf5" fill-opacity=".8" font-family="Inter, Helvetica, sans-serif"
font-size="32" letter-spacing="0em" opacity=".79" style="white-space:pre">
<tspan x="62" y="209.14">{{line1}}</tspan>
<tspan x="62" y="257.14">{{line2}}</tspan>
<tspan x="62" y="305.14">{{line3}}</tspan>
<tspan x="62" y="353.14">{{line4}}</tspan>
</text>
<path fill="#161618" d="M0 438h1200v192H0z" />
<path fill="#e7e7e7"
d="M395.33 562.28q-5.97 0-10.31-2.5a17 17 0 0 1-6.64-7.13q-2.32-4.64-2.32-10.91 0-6.18 2.32-10.84a17.7 17.7 0 0 1 6.56-7.29q4.2-2.63 9.9-2.63 3.66 0 6.92 1.2 3.28 1.17 5.78 3.64a17 17 0 0 1 3.98 6.3 26 26 0 0 1 1.45 9.07v2.89h-32.52v-6.36H404q-.03-2.7-1.17-4.81a8.5 8.5 0 0 0-3.17-3.36 9 9 0 0 0-4.7-1.23q-2.88 0-5.04 1.4a9.7 9.7 0 0 0-3.39 3.65q-1.19 2.25-1.21 4.93v5.54q0 3.5 1.27 6a9 9 0 0 0 3.53 3.8q2.29 1.3 5.32 1.3 2.05 0 3.7-.58a8 8 0 0 0 2.87-1.74 7 7 0 0 0 1.83-2.84l8.73 1a14 14 0 0 1-3.15 6.09 15.4 15.4 0 0 1-5.89 4q-3.6 1.41-8.21 1.41M346.67 562.2q-4.67 0-8.37-2.42a16.4 16.4 0 0 1-5.84-7.03q-2.14-4.6-2.14-11.2 0-6.67 2.17-11.25a16 16 0 0 1 5.91-6.95 15 15 0 0 1 8.3-2.37q3.48 0 5.73 1.2 2.25 1.17 3.56 2.84 1.32 1.63 2.05 3.1h.38v-19.95h9.38v53.33h-9.2v-6.3h-.56q-.74 1.45-2.1 3.1-1.37 1.61-3.61 2.76a12.4 12.4 0 0 1-5.66 1.14m2.6-7.73q2.99 0 5.07-1.62a10 10 0 0 0 3.18-4.55 19 19 0 0 0 1.08-6.8 19 19 0 0 0-1.08-6.74 9.6 9.6 0 0 0-3.15-4.46 8 8 0 0 0-5.1-1.59 8.2 8.2 0 0 0-5.2 1.64 10 10 0 0 0-3.16 4.54 19 19 0 0 0-1.06 6.61q0 3.75 1.06 6.7a10.5 10.5 0 0 0 3.18 4.6 8 8 0 0 0 5.19 1.67M312.98 561.5v-40h9.35v40zm4.7-45.68q-2.22 0-3.82-1.48a4.8 4.8 0 0 1-1.6-3.62q0-2.13 1.6-3.62a5.4 5.4 0 0 1 3.82-1.51q2.25 0 3.82 1.51 1.6 1.49 1.6 3.62a4.8 4.8 0 0 1-1.6 3.62 5.4 5.4 0 0 1-3.82 1.48M288.3 562.28q-5.93 0-10.2-2.63-4.23-2.62-6.53-7.26a24 24 0 0 1-2.27-10.73q0-6.1 2.32-10.76a17.4 17.4 0 0 1 6.56-7.29 19 19 0 0 1 10.07-2.63q4.83 0 8.56 1.8a14.6 14.6 0 0 1 5.96 5.02 15 15 0 0 1 2.53 7.55h-8.93a8.6 8.6 0 0 0-2.59-4.81q-2.01-1.95-5.4-1.96a8.4 8.4 0 0 0-5.03 1.57 10 10 0 0 0-3.39 4.42 18 18 0 0 0-1.19 6.93q0 4.1 1.2 7.03 1.19 2.93 3.33 4.5a8.5 8.5 0 0 0 5.08 1.57q2.07 0 3.7-.78a7.5 7.5 0 0 0 2.76-2.32q1.11-1.5 1.53-3.67h8.93a16 16 0 0 1-2.48 7.52 14.7 14.7 0 0 1-5.83 5.1 19.4 19.4 0 0 1-8.68 1.83M252.04 544.68V521.5h9.34v40h-9.06v-7.11h-.41a12 12 0 0 1-4.42 5.5q-3.05 2.13-7.52 2.13-3.9 0-6.9-1.74a12 12 0 0 1-4.64-5.13 18 18 0 0 1-1.68-8.18V521.5h9.35v24.01q0 3.8 2.06 6.04a7 7 0 0 0 5.43 2.24q2.07 0 4-1.01a8 8 0 0 0 3.18-3.02 9.4 9.4 0 0 0 1.26-5.08M185.96 561.5v-53.33h9.58v45.23h23.3v8.1zM117.1 534c0-7.6-6.1-13.75-13.64-13.75A13.7 13.7 0 0 0 89.82 534c0 17.72 14.25 32.08 31.83 32.08s31.82-14.36 31.82-32.08a50.5 50.5 0 0 0-16.67-37.58 4.6 4.6 0 0 1-.36-6.47 4.5 4.5 0 0 1 6.42-.36 59.7 59.7 0 0 1 19.7 44.4l-.05 2.13c-1.1 21.8-18.97 39.13-40.86 39.13-22.6 0-40.92-18.47-40.92-41.25a22.8 22.8 0 0 1 22.73-22.92A22.8 22.8 0 0 1 126.2 534a4.56 4.56 0 0 1-4.55 4.58 4.56 4.56 0 0 1-4.54-4.58" />
<path fill="#f56565"
d="M98.91 534a4.56 4.56 0 0 1 4.55-4.58 4.57 4.57 0 0 1 4.55 4.58c0 7.6 6.1 13.75 13.63 13.75 7.3 0 13.26-5.78 13.62-13.04l.02-.71c0-17.72-14.24-32.08-31.82-32.08S71.64 516.28 71.64 534a50.5 50.5 0 0 0 16.93 37.81 4.6 4.6 0 0 1 .4 6.48 4.53 4.53 0 0 1-6.42.4 59.7 59.7 0 0 1-19.98-43.03l-.02-1.66c0-22.78 18.31-41.25 40.91-41.25s40.92 18.47 40.92 41.25l-.04 1.18a22.8 22.8 0 0 1-22.7 21.74A22.8 22.8 0 0 1 98.92 534" />
<text xml:space="preserve" fill="#ebebf5" fill-opacity=".8" font-family="Inter, Helvetica, sans-serif"
font-size="39" font-weight="500" letter-spacing="0em" style="white-space:pre">
<tspan x="808.98" y="548.18">https://lucide.dev</tspan>
</text>
<path fill="url(#b)" d="M1116 0h84v435h-84z" />
</g>
<defs>
<linearGradient id="b" x1="1200" x2="1116" y1="218" y2="218" gradientUnits="userSpaceOnUse">
<stop stop-color="#1b1b1f" />
<stop offset="1" stop-color="#1b1b1f" stop-opacity="0" />
</linearGradient>
<clipPath id="a">
<path fill="#fff" d="M0 0h1200v630H0z" />
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 4.4 KiB

+2
View File
@@ -9,9 +9,11 @@ export const hash = (string: string, seed = 5381) => {
let i = string.length;
while (i) {
// eslint-disable-next-line no-bitwise, no-plusplus
seed = (seed * 33) ^ string.charCodeAt(--i);
}
// eslint-disable-next-line no-bitwise
return (seed >>> 0).toString(36).substr(0, 6);
};
-47
View File
@@ -1,47 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" fill="none">
<g clip-path="url(#a)">
<path fill="#1b1b1f" d="M0 0h1200v630H0z" />
<g clip-path="url(#b)">
<rect width="320" height="320" x="62" y="66" fill="#161618" rx="24" />
<path stroke="#202127"
d="M62 79.33h320M75.33 66v320M62 92.67h320M88.67 66v320M62 106h320M102 66v320M62 119.33h320M115.33 66v320M62 132.67h320M128.67 66v320M62 146h320M142 66v320M62 159.33h320M155.33 66v320M62 172.67h320M168.67 66v320M62 186h320M182 66v320M62 199.33h320M195.33 66v320M62 212.67h320M208.67 66v320M62 226h320M222 66v320M62 239.33h320M235.33 66v320M62 252.67h320M248.67 66v320M62 266h320M262 66v320M62 279.33h320M275.33 66v320M62 292.67h320M288.67 66v320M62 306h320M302 66v320M62 319.33h320M315.33 66v320M62 332.67h320M328.67 66v320M62 346h320M342 66v320M62 359.33h320M355.33 66v320M62 372.67h320M368.67 66v320" />
{{iconSVG}}
</g>
<text xml:space="preserve" fill="#ebebf5" fill-opacity=".8" font-family="Inter" font-size="32" letter-spacing="0em"
opacity=".79" style="white-space:pre">
<tspan x="434" y="293.64">See the icon preview, code examples,
</tspan>
<tspan x="434" y="341.64">release details and other related icons.</tspan>
</text>
<text xml:space="preserve" fill="#fff" font-family="Inter" font-size="44" font-weight="600" letter-spacing=".05em"
style="white-space:pre">
<tspan x="438" y="130.5">{{name}}</tspan>
</text>
<text xml:space="preserve" fill="#98989f" font-family="Inter" font-size="32" letter-spacing=".05em"
style="white-space:pre">
<tspan x="438" y="208.14">{{tags}}</tspan>
</text>
<path fill="#161618" d="M0 438h1200v192H0z" />
<path fill="#e7e7e7"
d="M395.33 562.28q-5.97 0-10.31-2.5a17 17 0 0 1-6.64-7.13q-2.32-4.64-2.32-10.92 0-6.17 2.32-10.83a17.7 17.7 0 0 1 6.56-7.3q4.2-2.62 9.9-2.62 3.66 0 6.92 1.2 3.28 1.17 5.78 3.64a17 17 0 0 1 3.98 6.3 26 26 0 0 1 1.45 9.07v2.89h-32.52v-6.36H404q-.03-2.7-1.17-4.81a8.5 8.5 0 0 0-3.17-3.36 9 9 0 0 0-4.7-1.23q-2.88 0-5.04 1.4a9.7 9.7 0 0 0-3.39 3.65q-1.19 2.25-1.21 4.93v5.54q0 3.5 1.27 6a9 9 0 0 0 3.53 3.8q2.29 1.3 5.32 1.3 2.05 0 3.7-.58a8 8 0 0 0 2.87-1.74 7 7 0 0 0 1.83-2.84l8.73 1a14 14 0 0 1-3.15 6.09 15.4 15.4 0 0 1-5.89 4q-3.6 1.41-8.21 1.41M346.67 562.2q-4.67 0-8.37-2.42a16.4 16.4 0 0 1-5.84-7.03q-2.14-4.6-2.14-11.2 0-6.67 2.17-11.25a16 16 0 0 1 5.91-6.95 15 15 0 0 1 8.3-2.37q3.48 0 5.73 1.2 2.25 1.17 3.56 2.84 1.32 1.63 2.05 3.1h.38v-19.95h9.38v53.33h-9.2v-6.3h-.56q-.74 1.45-2.1 3.1-1.37 1.61-3.61 2.76a12.4 12.4 0 0 1-5.66 1.14m2.6-7.73q2.99 0 5.07-1.62a10 10 0 0 0 3.18-4.55 19 19 0 0 0 1.08-6.8 19 19 0 0 0-1.08-6.74 9.6 9.6 0 0 0-3.15-4.46 8 8 0 0 0-5.1-1.59 8.2 8.2 0 0 0-5.2 1.64 10 10 0 0 0-3.16 4.54 19 19 0 0 0-1.06 6.61q0 3.75 1.06 6.7a10.5 10.5 0 0 0 3.18 4.6 8 8 0 0 0 5.19 1.67M312.98 561.5v-40h9.35v40zm4.7-45.68q-2.22 0-3.82-1.48a4.8 4.8 0 0 1-1.6-3.62q0-2.13 1.6-3.62a5.4 5.4 0 0 1 3.82-1.51q2.25 0 3.82 1.51 1.6 1.49 1.6 3.62a4.8 4.8 0 0 1-1.6 3.62 5.4 5.4 0 0 1-3.82 1.48M288.3 562.28q-5.93 0-10.2-2.63-4.23-2.62-6.53-7.26a24 24 0 0 1-2.27-10.73q0-6.1 2.32-10.76a17.4 17.4 0 0 1 6.56-7.29 19 19 0 0 1 10.07-2.63q4.83 0 8.56 1.8a14.6 14.6 0 0 1 5.96 5.02 15 15 0 0 1 2.53 7.55h-8.93a8.6 8.6 0 0 0-2.59-4.81q-2.01-1.95-5.4-1.96a8.4 8.4 0 0 0-5.03 1.57 10 10 0 0 0-3.39 4.42 18 18 0 0 0-1.19 6.93q0 4.1 1.2 7.03 1.19 2.93 3.33 4.5a8.5 8.5 0 0 0 5.08 1.57q2.07 0 3.7-.78a7.5 7.5 0 0 0 2.76-2.32q1.11-1.5 1.53-3.67h8.93a16 16 0 0 1-2.48 7.52 14.7 14.7 0 0 1-5.83 5.1 19.4 19.4 0 0 1-8.68 1.83M252.04 544.68V521.5h9.34v40h-9.06v-7.11h-.41a12 12 0 0 1-4.42 5.5q-3.05 2.13-7.52 2.13-3.9 0-6.9-1.74a12 12 0 0 1-4.64-5.13 18 18 0 0 1-1.68-8.18V521.5h9.35v24.01q0 3.8 2.06 6.04a7 7 0 0 0 5.43 2.24q2.07 0 4-1.01a8 8 0 0 0 3.18-3.02 9.4 9.4 0 0 0 1.26-5.08M185.96 561.5v-53.33h9.58v45.23h23.3v8.1zM117.1 534c0-7.6-6.1-13.75-13.64-13.75A13.7 13.7 0 0 0 89.82 534c0 17.72 14.25 32.08 31.83 32.08s31.82-14.36 31.82-32.08a50.5 50.5 0 0 0-16.67-37.58 4.6 4.6 0 0 1-.36-6.47 4.5 4.5 0 0 1 6.42-.36 59.7 59.7 0 0 1 19.7 44.4l-.05 2.13c-1.1 21.8-18.97 39.13-40.86 39.13-22.6 0-40.92-18.47-40.92-41.25a22.8 22.8 0 0 1 22.73-22.92A22.8 22.8 0 0 1 126.2 534a4.56 4.56 0 0 1-4.55 4.58 4.56 4.56 0 0 1-4.54-4.58" />
<path fill="#f56565"
d="M98.91 534a4.56 4.56 0 0 1 4.55-4.58 4.57 4.57 0 0 1 4.55 4.58c0 7.6 6.1 13.75 13.63 13.75 7.3 0 13.26-5.78 13.62-13.04l.02-.71c0-17.72-14.24-32.08-31.82-32.08S71.64 516.28 71.64 534a50.5 50.5 0 0 0 16.93 37.81 4.6 4.6 0 0 1 .4 6.48 4.53 4.53 0 0 1-6.42.4 59.7 59.7 0 0 1-19.98-43.03l-.02-1.66c0-22.78 18.31-41.25 40.91-41.25s40.92 18.47 40.92 41.25l-.04 1.18a22.8 22.8 0 0 1-22.7 21.74A22.8 22.8 0 0 1 98.92 534" />
<text xml:space="preserve" fill="#ebebf5" fill-opacity=".8" font-family="Inter" font-size="39" font-weight="500"
letter-spacing="0em" style="white-space:pre">
<tspan x="808.98" y="548.18">https://lucide.dev</tspan>
</text>
<path fill="url(#c)" d="M1116 0h84v435h-84z" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h1200v630H0z" />
</clipPath>
<clipPath id="b">
<rect width="320" height="320" x="62" y="66" fill="#fff" rx="24" />
</clipPath>
<linearGradient id="c" x1="1200" x2="1116" y1="218" y2="218" gradientUnits="userSpaceOnUse">
<stop stop-color="#1b1b1f" />
<stop offset="1" stop-color="#1b1b1f" stop-opacity="0" />
</linearGradient>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 5.3 KiB

-204
View File
@@ -1,204 +0,0 @@
import { readFileSync } from 'node:fs';
import { dirname, isAbsolute, resolve } from 'node:path';
import type MarkdownIt from 'markdown-it';
import type { RenderRule } from 'markdown-it/lib/renderer.mjs';
import container from 'markdown-it-container';
type ContainerArgs = [typeof container, string, { render: RenderRule }];
const parseInfo = (info: string, marker: string) => info.trim().slice(marker.length).trim();
const stripWrappingQuotes = (value: string) => {
const quote = value[0];
if ((quote === '"' || quote === "'") && value.at(-1) === quote) {
return value.slice(1, -1);
}
return value;
};
const isRawSvgUrl = (url: string) => {
const [filePath, query = ''] = url.split('?');
const params = new URLSearchParams(query);
return filePath.endsWith('.svg') && params.get('raw') === 'true';
};
const isImageUrl = (value: string) => {
const [filePath] = value.split('?');
return /\.(avif|gif|jpe?g|png|svg|webp)$/i.test(filePath);
};
const resolveMarkdownPath = (env: Record<string, unknown>) =>
(env.path as string | undefined) ??
(env.file as string | undefined) ??
(env.realPath as string | undefined);
const renderImage = (
url: string,
env: Record<string, unknown>,
escapeAttr: (value: string) => string,
) => {
if (!isRawSvgUrl(url)) {
return `<img class="example-guidance__image" src="${escapeAttr(url)}" alt="" loading="lazy">`;
}
const [filePath] = url.split('?');
const markdownPath = resolveMarkdownPath(env);
const resolvedPath = isAbsolute(filePath)
? resolve(process.cwd(), `.${filePath}`)
: resolve(markdownPath ? dirname(markdownPath) : process.cwd(), filePath);
const svg = readFileSync(resolvedPath, 'utf8');
const replacedSvg = svg
.replaceAll(/(#000(000)?|black)/g, 'currentColor')
.replaceAll(' stroke="#D8D8D9"', 'style="stroke: currentColor; stroke-opacity: .25;"');
return `<div class="example-guidance__image example-guidance__image--raw">${replacedSvg}</div>`;
};
const renderPreview = (
value: string,
env: Record<string, unknown>,
escapeHtml: (value: string) => string,
renderInline: (value: string) => string,
) => {
if (isImageUrl(value)) {
return renderImage(value, env, escapeHtml);
}
return `<div class="example-guidance__text">${renderInline(value)}</div>`;
};
const hasTopLevelContent = (tokens: Parameters<RenderRule>[0], index: number) => {
let guidanceDepth = 0;
for (let i = index + 1; i < tokens.length; i += 1) {
const token = tokens[i];
if (token.type === 'container_example_close') {
return false;
}
if (token.type === 'container_do_open' || token.type === 'container_dont_open') {
guidanceDepth += 1;
continue;
}
if (token.type === 'container_do_close' || token.type === 'container_dont_close') {
guidanceDepth -= 1;
continue;
}
if (guidanceDepth === 0) {
return true;
}
}
return false;
};
const hasGuidance = (tokens: Parameters<RenderRule>[0], index: number) => {
for (let i = index + 1; i < tokens.length; i += 1) {
const token = tokens[i];
if (token.type === 'container_example_close') {
return false;
}
if (token.type === 'container_do_open' || token.type === 'container_dont_open') {
return true;
}
}
return false;
};
const isFirstGuidance = (tokens: Parameters<RenderRule>[0], index: number) => {
for (let i = index - 1; i >= 0; i -= 1) {
const token = tokens[i];
if (token.type === 'container_example_open') {
return true;
}
if (token.type === 'container_do_open' || token.type === 'container_dont_open') {
return false;
}
}
return true;
};
const getExampleOpenIndex = (tokens: Parameters<RenderRule>[0], index: number) => {
for (let i = index; i >= 0; i -= 1) {
if (tokens[i].type === 'container_example_open') {
return i;
}
}
return index;
};
export default function examplePlugin(md: MarkdownIt) {
const escapeHtml = md.utils.escapeHtml;
const createExampleContainer = (): ContainerArgs => [
container,
'example',
{
render(tokens, idx) {
const token = tokens[idx];
if (token.nesting === 1) {
const hasContent = hasTopLevelContent(tokens, idx);
const guidanceOnlyClass = hasContent ? '' : ' example-block--guidance-only';
const contentOpen = hasContent ? '<div class="example-block__content">\n' : '';
return `<section class="example-block${guidanceOnlyClass}">\n${contentOpen}`;
}
const exampleOpenIndex = getExampleOpenIndex(tokens, idx);
const contentClose =
hasTopLevelContent(tokens, exampleOpenIndex) && !hasGuidance(tokens, exampleOpenIndex)
? '</div>\n'
: '';
return `${contentClose}</section>\n`;
},
},
];
const createGuidanceContainer = (type: 'do' | 'dont'): ContainerArgs => [
container,
type,
{
render(tokens, idx, _options, env) {
const token = tokens[idx];
if (token.nesting === 1) {
const exampleOpenIndex = getExampleOpenIndex(tokens, idx);
const preview = stripWrappingQuotes(parseInfo(token.info, type));
const media = renderPreview(preview, env, escapeHtml, md.renderInline.bind(md));
const contentClose =
hasTopLevelContent(tokens, exampleOpenIndex) && isFirstGuidance(tokens, idx)
? '</div>\n'
: '';
const label =
type === 'do'
? `<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" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg> Do`
: `<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" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> Don't`;
return `${contentClose}<figure class="example-guidance example-guidance--${type}">${media}<figcaption class="example-guidance__caption"><div class="example-guidance__label">${label}</div>\n`;
}
return '</figcaption></figure>\n';
},
},
];
md.use(...createExampleContainer());
md.use(...createGuidanceContainer('do'));
md.use(...createGuidanceContainer('dont'));
}
-129
View File
@@ -1,129 +0,0 @@
import type MarkdownIt from 'markdown-it';
import type { RenderRule } from 'markdown-it/lib/renderer.mjs';
import type Token from 'markdown-it/lib/token.mjs';
import container from 'markdown-it-container';
import sandpackTheme from '../theme/sandpackTheme.json';
type SnackParams = {
defaultFiles?: Record<
string,
{
code: string;
active?: boolean;
hidden?: boolean;
}
>;
};
type ContainerArgs = [typeof container, string, { render: RenderRule }];
export default function sandpackPlugin(md: MarkdownIt, pluginOptions: SnackParams = {}) {
if (md == null) {
throw new Error('MarkdownIt instance is required for sandpackPlugin');
}
const escapeHtml = md?.utils?.escapeHtml;
const renderSandbox = (tokenList: Token[], index: number) => {
const renderFunc = (tokens: Token[], idx: number) => {
if (tokens[idx].nesting === 1) {
const attrs = Object.fromEntries(tokens[idx].attrs || []);
const files: Record<
string,
{
code: string;
active?: boolean;
hidden?: boolean;
}
> = {};
for (
let i = idx + 1;
!(tokens[i].nesting === -1 && tokens[i].type === 'container_sandpack_close');
++i
) {
if (tokens[i].type === 'fence' && tokens[i].tag === 'code') {
const info = tokens[i].info ?? '';
const [, fileName, params = ''] = info.split(' ');
const active = params.includes('[active]');
const hidden = params.includes('[hidden]');
const code = tokens[i].content;
if (fileName && code) {
files[fileName] = {
code,
...(active && { active: true }),
...(hidden && { hidden: true }),
};
}
}
}
const { dependencies, showTabs, externalResources, editorWidthPercentage, ...options } =
attrs;
const dependencyList = dependencies?.split(',')?.map((dep: string) => dep.trim()) ?? [];
const dependencyObject = dependencyList.reduce(
(acc: Record<string, string>, name: string) => {
acc[name] = 'latest';
return acc;
},
{},
);
const externalResourcesList = externalResources
?.split(',')
?.map((res: string) => res.trim())
?.filter((res: string) => res.length > 0);
const filesWithDefaultStyles = {
...pluginOptions.defaultFiles,
...files,
};
return `\
<Sandpack\
template="${escapeHtml(attrs.template || 'vanilla')}"\
:theme="${escapeHtml(JSON.stringify(sandpackTheme))}"\
:customSetup="${escapeHtml(
dependencyList
? JSON.stringify({
dependencies: dependencyList.length ? dependencyObject : {},
})
: undefined,
)}"
:files="${escapeHtml(JSON.stringify(filesWithDefaultStyles))}"\
:options="${escapeHtml(
JSON.stringify({
...(showTabs ? { showTabs: JSON.parse(showTabs) } : {}),
externalResources: externalResourcesList,
editorWidthPercentage: editorWidthPercentage
? Number(editorWidthPercentage)
: undefined,
...options,
}),
)}"\
>`;
}
return `</Sandpack>`;
};
return renderFunc(tokenList, index);
};
function createCodeGroup(): ContainerArgs {
return [
container,
'sandpack',
{
render(tokens, idx) {
return renderSandbox(tokens, idx);
},
},
];
}
md.use(...createCodeGroup());
}
-98
View File
@@ -1,98 +0,0 @@
/**
* SnackPlayer markdown-it plugin
*
* Converts fenced code blocks like:
*
* ```SnackPlayer name=My%20Example&description=Nice%20demo&ext=tsx
* // code here
* ```
*
* into:
*
* <div
* class="snack-player"
* data-snack-name="My Example"
* ...
* />
*/
import type MarkdownIt from 'markdown-it';
type SnackParams = Record<string, string>;
function parseParams(paramString = ''): SnackParams {
const params = Object.fromEntries(new URLSearchParams(paramString)) as SnackParams;
if (!params.platform) {
params.platform = 'web';
}
return params;
}
export default function snackPlayerPlugin(md: MarkdownIt) {
const escapeHtml = md.utils.escapeHtml;
const defaultFence =
md.renderer.rules.fence ||
((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options));
md.renderer.rules.fence = (tokens, idx, options, env, self) => {
const token = tokens[idx];
const info = (token.info || '').trim();
if (!info) {
return defaultFence(tokens, idx, options, env, self);
}
const [lang, ...rest] = info.split(/\s+/);
if (lang !== 'SnackPlayer') {
return defaultFence(tokens, idx, options, env, self);
}
const paramString = rest.join(' ');
const params = parseParams(paramString);
// Gather necessary params
const name = params.name ? decodeURIComponent(params.name) : 'Example';
const description = params.description
? decodeURIComponent(params.description)
: 'Example usage';
const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
const filename = `App.${ext}`;
const files = encodeURIComponent(
JSON.stringify({
[filename]: {
type: 'CODE',
contents: token.content,
},
}),
);
const dependencies =
'react-native-safe-area-context' + (params.dependencies ? `,${params.dependencies}` : '');
const platform = params.platform ?? 'web';
const supportedPlatforms = params.supportedPlatforms ?? 'ios,android,web';
const preview = params.preview ?? 'true';
const loading = params.loading ?? 'lazy';
const deviceAppearance = params.deviceAppearance ?? 'dark';
// Build the HTML output (escaping where appropriate)
return (
`<SnackPlayer` +
` class="snack-player"` +
` data-snack-name="${escapeHtml(name)}"` +
` data-snack-description="${escapeHtml(description)}"` +
` data-snack-files="${files}"` +
` data-snack-dependencies="${escapeHtml(dependencies)}"` +
` data-snack-platform="${escapeHtml(platform)}"` +
` data-snack-supported-platforms="${escapeHtml(supportedPlatforms)}"` +
// ` data-snack-theme="${escapeHtml(params.theme ?? 'light')}"` +
` data-snack-preview="${escapeHtml(preview)}"` +
` data-snack-loading="${escapeHtml(loading)}"` +
` data-snack-device-appearance="${escapeHtml(deviceAppearance)}"` +
` data-snack-device-frame="false"` +
`></SnackPlayer>`
);
};
}
+139
View File
@@ -0,0 +1,139 @@
import { DefaultTheme, UserConfig } from 'vitepress';
const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
guide: [
{
text: 'Introduction',
items: [
{ text: 'What is lucide?', link: '/guide/' },
{ text: 'Installation', link: '/guide/installation' },
{ text: 'Comparison', link: '/guide/comparison' },
],
},
{
text: 'Basics',
items: [
{
text: 'Color',
link: '/guide/basics/color',
},
{
text: 'Sizing',
link: '/guide/basics/sizing',
},
{
text: 'Stroke width',
link: '/guide/basics/stroke-width',
},
],
},
// TODO: Add this section
{
text: 'Advanced',
items: [
{
text: 'Accessibility',
link: '/guide/advanced/accessibility',
},
{
text: 'Global styling',
link: '/guide/advanced/global-styling',
},
// {
// text: 'Animations',
// },
{
text: 'Filled icons',
link: '/guide/advanced/filled-icons',
},
{
text: 'Aliased Names',
link: '/guide/advanced/aliased-names',
},
// {
// text: 'Combining icons',
// },
// {
// text: 'Dynamic imports'
// },
// {
// text: 'Auto importing'
// },
],
},
{
text: 'Packages',
items: [
{
text: 'Lucide',
link: '/guide/packages/lucide',
},
{
text: 'Lucide React',
link: '/guide/packages/lucide-react',
},
{
text: 'Lucide Vue',
link: '/guide/packages/lucide-vue-next',
},
{
text: 'Lucide Svelte',
link: '/guide/packages/lucide-svelte',
},
{
text: 'Lucide Solid',
link: '/guide/packages/lucide-solid',
},
{
text: 'Lucide React Native',
link: '/guide/packages/lucide-react-native',
},
{
text: 'Lucide Angular',
link: '/guide/packages/lucide-angular',
},
{
text: 'Lucide Preact',
link: '/guide/packages/lucide-preact',
},
{
text: 'Lucide Astro',
link: '/guide/packages/lucide-astro',
},
{
text: 'Lucide Static',
link: '/guide/packages/lucide-static',
},
],
},
{
text: 'Contributing',
items: [
{
text: 'Icon Design Principles',
link: '/guide/design/icon-design-guide',
},
{
text: 'Designing in Illustrator',
link: '/guide/design/illustrator-guide',
},
{
text: 'Designing in InkScape',
link: '/guide/design/inkscape-guide',
},
{
text: 'Designing in Figma',
link: '/guide/design/figma-guide',
},
{
text: 'Designing in Affinity Designer',
link: '/guide/design/affinity-designer-guide',
},
],
},
],
// This should be here to keep the sidebar shown on the icons page
icons: [{ text: '', link: '/' }],
};
export default sidebar;
-107
View File
@@ -1,107 +0,0 @@
import { DefaultTheme } from 'vitepress';
export const angularSidebar = [
{
items: [
{
text: 'Overview',
link: '/guide/angular/',
},
{
text: 'Getting started',
link: '/guide/angular/getting-started',
desc: 'Learn how to get started with Lucide for Angular.',
},
{
text: 'Migration from v0',
link: '/guide/angular/migration',
desc: 'Learn how to migrate from v0 to v1 of Lucide.',
},
],
},
{
text: 'Basics',
items: [
{
text: 'Color',
desc: 'Adjust the color of your icons',
link: '/guide/angular/basics/color',
},
{
text: 'Sizing',
desc: 'Adjust the size of your icons',
link: '/guide/angular/basics/sizing',
},
{
text: 'Stroke width',
desc: 'Adjust the stroke width of your icons',
link: '/guide/angular/basics/stroke-width',
},
],
},
{
text: 'Advanced',
items: [
{
text: 'Typescript',
link: '/guide/angular/advanced/typescript',
desc: 'All exported types and how to use them',
},
{
text: 'Accessibility',
link: '/guide/angular/advanced/accessibility',
desc: 'Making your icons accessible',
},
{
text: 'Global styling',
link: '/guide/angular/advanced/global-styling',
desc: 'Apply global styles to all icons',
},
{
text: 'With Lucide Lab',
link: '/guide/angular/advanced/with-lucide-lab',
desc: 'Using lucide-lab with @lucide/angular',
},
// {
// text: 'Animations',
// link: '/guide/angular/advanced/animations',
// desc: 'Add animations to your icons',
// },
{
text: 'Filled icons',
link: '/guide/angular/advanced/filled-icons',
desc: 'Using filled icons in @lucide/angular',
},
{
text: 'Combining icons',
link: '/guide/angular/advanced/combining-icons',
desc: 'Combine multiple icons into one',
},
// {
// text: 'Dynamic icon component',
// link: '/guide/angular/advanced/dynamic-icon-component.md',
// desc: 'Dynamically import icons as needed',
// },
{
text: 'Icon provider',
link: '/guide/angular/advanced/icon-provider',
desc: 'Provide icons at app level and use them by name',
},
],
},
{
text: 'Resources',
items: [
{
text: 'Accessibility in depth',
link: '/guide/accessibility',
desc: 'Accessibility best practices',
},
{
text: 'VSCode',
link: '/guide/vscode',
desc: 'VSCode and Lucide',
},
],
},
] satisfies DefaultTheme.SidebarItem[] & { items: { desc?: string }[] }[];
-82
View File
@@ -1,82 +0,0 @@
import { DefaultTheme } from 'vitepress';
export const astroSidebar = [
{
items: [
{
text: 'Overview',
link: '/guide/astro/',
},
{
text: 'Getting started',
link: '/guide/astro/getting-started',
desc: 'Learn how to get started with Lucide for Astro.',
},
{
text: 'Migration from v0',
link: '/guide/astro/migration',
desc: 'Learn how to migrate from v0 to v1 of Lucide Astro.',
},
],
},
{
text: 'Basics',
items: [
{
text: 'Color',
desc: 'Adjust the color of your icons',
link: '/guide/astro/basics/color',
},
{
text: 'Sizing',
desc: 'Adjust the size of your icons',
link: '/guide/astro/basics/sizing',
},
{
text: 'Stroke width',
desc: 'Adjust the stroke width of your icons',
link: '/guide/astro/basics/stroke-width',
},
],
},
{
text: 'Advanced',
items: [
{
text: 'Typescript',
link: '/guide/astro/advanced/typescript',
desc: 'All exported types and how to use them',
},
{
text: 'Accessibility',
link: '/guide/astro/advanced/accessibility',
desc: 'Making your icons accessible',
},
{
text: 'Global styling',
link: '/guide/astro/advanced/global-styling',
desc: 'Apply global styles to all icons',
},
{
text: 'With Lucide Lab',
link: '/guide/astro/advanced/with-lucide-lab',
desc: 'Using lucide-lab with @lucide/astro',
},
],
},
{
text: 'Resources',
items: [
{
text: 'Accessibility in depth',
link: '/guide/accessibility',
desc: 'Accessibility best practices',
},
{
text: 'VSCode',
link: '/guide/vscode',
desc: 'VSCode and Lucide',
},
],
},
] satisfies DefaultTheme.SidebarItem[] & { items: { desc?: string }[] }[];
-48
View File
@@ -1,48 +0,0 @@
import { DefaultTheme, UserConfig } from 'vitepress';
import { reactSidebar } from './react';
import { vueSidebar } from './vue';
import { svelteSidebar } from './svelte';
import { lucideSidebar } from './lucide';
import { solidSidebar } from './solid';
import { preactSidebar } from './preact';
import { reactNativeSidebar } from './react-native';
import { astroSidebar } from './astro';
import { resourcesSidebar } from './resources';
import { angularSidebar } from './angular';
import { lucideStaticSidebar } from './static';
type Sidebar = UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'];
export const guideSidebarTop: DefaultTheme.SidebarItem[] = [
{
text: 'Introduction',
items: [
{ text: 'What is Lucide?', link: '/guide/' },
{ text: 'Version 1', link: '/guide/version-1' },
{ text: 'Installation', link: '/guide/installation' },
],
},
];
const sidebar: Sidebar = {
'/guide': [{ text: '', link: '/' }],
'/guide/lucide/': lucideSidebar,
'/guide/react/': reactSidebar,
'/guide/vue/': vueSidebar,
'/guide/svelte/': svelteSidebar,
'/guide/solid/': solidSidebar,
'/guide/astro/': astroSidebar,
'/guide/preact/': preactSidebar,
'/guide/react-native/': reactNativeSidebar,
'/guide/angular/': angularSidebar,
'/guide/static/': lucideStaticSidebar,
'/community': resourcesSidebar,
'/contribute': resourcesSidebar,
'/license': resourcesSidebar,
'/code-of-conduct': resourcesSidebar,
'/brand-logo-statement': resourcesSidebar,
// This should be here to keep the sidebar shown on the icons page
icons: [{ text: '', link: '/' }],
};
export default sidebar;
-87
View File
@@ -1,87 +0,0 @@
import { DefaultTheme } from 'vitepress';
export const lucideSidebar = [
{
items: [
{
text: 'Overview',
link: '/guide/lucide/',
},
{
text: 'Getting started',
link: '/guide/lucide/getting-started',
desc: 'Learn how to get started with Lucide.',
},
{
text: 'Migration from v0',
link: '/guide/lucide/migration',
desc: 'Learn how to migrate from v0 to v1 of Lucide.',
},
],
},
{
text: 'Basics',
items: [
{
text: 'Color',
desc: 'Adjust the color of your icons',
link: '/guide/lucide/basics/color',
},
{
text: 'Sizing',
desc: 'Adjust the size of your icons',
link: '/guide/lucide/basics/sizing',
},
{
text: 'Stroke width',
desc: 'Adjust the stroke width of your icons',
link: '/guide/lucide/basics/stroke-width',
},
],
},
{
text: 'Advanced',
items: [
{
text: 'Global styling',
link: '/guide/lucide/advanced/global-styling',
desc: 'Apply options and styles globally',
},
{
text: 'Shadow DOM',
link: '/guide/lucide/advanced/shadow-dom',
desc: 'All exported types and how to use them',
},
{
text: 'Template element',
link: '/guide/lucide/advanced/content-template-element',
desc: 'Using content template element with lucide',
},
{
text: 'Accessibility',
link: '/guide/lucide/advanced/accessibility',
desc: 'Making your icons accessible',
},
{
text: 'With Lucide Lab',
link: '/guide/lucide/advanced/with-lucide-lab',
desc: 'Using lucide-lab with lucide',
},
{
text: 'Filled icons',
link: '/guide/lucide/advanced/filled-icons',
desc: 'Using filled icons in lucide',
},
],
},
{
text: 'Resources',
items: [
{
text: 'Accessibility in depth',
link: '/guide/accessibility',
desc: 'Accessibility best practices',
},
],
},
] satisfies DefaultTheme.SidebarItem[] & { items: { desc?: string }[] }[];
-102
View File
@@ -1,102 +0,0 @@
import { DefaultTheme } from 'vitepress';
export const preactSidebar = [
{
items: [
{
text: 'Overview',
link: '/guide/preact/',
},
{
text: 'Getting started',
link: '/guide/preact/getting-started',
desc: 'Learn how to get started with Lucide for PReact.',
},
{
text: 'Migration from v0',
link: '/guide/preact/migration',
desc: 'Learn how to migrate from v0 to v1 of Lucide.',
},
],
},
{
text: 'Basics',
items: [
{
text: 'Color',
desc: 'Adjust the color of your icons',
link: '/guide/preact/basics/color',
},
{
text: 'Sizing',
desc: 'Adjust the size of your icons',
link: '/guide/preact/basics/sizing',
},
{
text: 'Stroke width',
desc: 'Adjust the stroke width of your icons',
link: '/guide/preact/basics/stroke-width',
},
],
},
{
text: 'Advanced',
items: [
{
text: 'Typescript',
link: '/guide/preact/advanced/typescript',
desc: 'All exported types and how to use them',
},
{
text: 'Accessibility',
link: '/guide/preact/advanced/accessibility',
desc: 'Making your icons accessible',
},
{
text: 'Global styling',
link: '/guide/preact/advanced/global-styling',
desc: 'Apply global styles to all icons',
},
{
text: 'With Lucide Lab',
link: '/guide/preact/advanced/with-lucide-lab',
desc: 'Using lucide-lab with lucide-preact',
},
// {
// text: 'Animations',
// link: '/guide/preact/advanced/animations',
// desc: 'Add animations to your icons',
// },
{
text: 'Filled icons',
link: '/guide/preact/advanced/filled-icons',
desc: 'Using filled icons in lucide-preact',
},
{
text: 'Aliased Names',
link: '/guide/preact/advanced/aliased-names',
desc: 'Using aliased icon names',
},
{
text: 'Combining icons',
link: '/guide/preact/advanced/combining-icons',
desc: 'Combine multiple icons into one',
},
],
},
{
text: 'Resources',
items: [
{
text: 'Accessibility in depth',
link: '/guide/accessibility',
desc: 'Accessibility best practices',
},
{
text: 'VSCode',
link: '/guide/vscode',
desc: 'VSCode and Lucide',
},
],
},
] satisfies DefaultTheme.SidebarItem[] & { items: { desc?: string }[] }[];
-92
View File
@@ -1,92 +0,0 @@
import { DefaultTheme } from 'vitepress';
export const reactNativeSidebar = [
{
items: [
{
text: 'Overview',
link: '/guide/react-native/',
},
{
text: 'Getting started',
link: '/guide/react-native/getting-started',
desc: 'Learn how to get started with Lucide React Native',
},
{
text: 'Migration from v0',
link: '/guide/react-native/migration',
desc: 'Learn how to migrate from v0 to v1 of Lucide.',
},
],
},
{
text: 'Basics',
items: [
{
text: 'Color',
desc: 'Adjust the color of your icons',
link: '/guide/react-native/basics/color',
},
{
text: 'Sizing',
desc: 'Adjust the size of your icons',
link: '/guide/react-native/basics/sizing',
},
{
text: 'Stroke width',
desc: 'Adjust the stroke width of your icons',
link: '/guide/react-native/basics/stroke-width',
},
],
},
{
text: 'Advanced',
items: [
{
text: 'Typescript',
link: '/guide/react-native/advanced/typescript',
desc: 'All exported types and how to use them',
},
{
text: 'Global styling',
link: '/guide/react-native/advanced/global-styling',
desc: 'Apply global styles to all icons',
},
{
text: 'With Lucide Lab',
link: '/guide/react-native/advanced/with-lucide-lab',
desc: 'Using lucide-lab with lucide-react-native',
},
{
text: 'Filled icons',
link: '/guide/react-native/advanced/filled-icons',
desc: 'Using filled icons in lucide-react-native',
},
{
text: 'Aliased Names',
link: '/guide/react-native/advanced/aliased-names',
desc: 'Using aliased icon names',
},
{
text: 'Combining icons',
link: '/guide/react-native/advanced/combining-icons',
desc: 'Combine multiple icons into one',
},
{
text: 'Optimizations',
link: '/guide/react-native/advanced/optimizations',
desc: 'Optimizing your app for performance',
},
],
},
{
text: 'Resources',
items: [
{
text: 'VSCode',
link: '/guide/vscode',
desc: 'VSCode and Lucide',
},
],
},
] satisfies DefaultTheme.SidebarItem[] & { items: { desc?: string }[] }[];

Some files were not shown because too many files have changed in this diff Show More