mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-02-24 03:39:40 +01:00
Update missing paths
This commit is contained in:
Eric Fennis
@@ -26,7 +26,7 @@ We love contributions of new icons from the community! If you want to contribute
|
||||
|
||||
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/docs/icon-design-guide).
|
||||
Read it here: [ICON_GUIDELINES](https://lucide.dev/contribute/icon-design-guide).
|
||||
|
||||
#### Lucide Studio
|
||||
|
||||
@@ -36,15 +36,15 @@ For formatting and adjusting SVG icons, [@jguddas](https://github.com/jguddas) m
|
||||
|
||||
Here you can find instructions on how to implement the guidelines with different vector graphics editors:
|
||||
|
||||
##### [Adobe Illustrator Guide](https://lucide.dev/docs/illustrator-guide)
|
||||
##### [Adobe Illustrator Guide](https://lucide.dev/contribute/illustrator-guide/illustrator-guide)
|
||||
|
||||
You can also [download an Adobe Illustrator template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/illustrator_template.ai).
|
||||
You can also [download an Adobe Illustrator template](https://lucide.dev/templates/illustrator_template.ai).
|
||||
|
||||
##### [Inkscape Guide](https://lucide.dev/docs/inkscape-guide)
|
||||
##### [Inkscape Guide](https://lucide.dev/contribute/inkscape-guide)
|
||||
|
||||
##### [Figma Guide](https://lucide.dev/docs/figma-guide)
|
||||
##### [Figma Guide](https://lucide.dev/contribute/figma-guide)
|
||||
|
||||
##### [Affinity Designer Guide](https://lucide.dev/guide/design/affinity-designer-guide)
|
||||
##### [Affinity Designer Guide](https://lucide.dev/contribute/affinity-designer-guide)
|
||||
|
||||
#### Submitting Multiple Icons
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ Welcome to the Lucide community! This guide provides information on how to get i
|
||||
|
||||
## Code of Conduct
|
||||
|
||||
Please read and adhere to our [Code of Conduct](/code-of-conduct) to ensure a welcoming and inclusive environment for all community members.
|
||||
Please read and adhere to our [Code of Conduct](/code-of-conduct.md) to ensure a welcoming and inclusive environment for all community members.
|
||||
|
||||
## Connecting with the Community
|
||||
|
||||
@@ -16,7 +16,7 @@ There are several ways to get involved with the Lucide community:
|
||||
|
||||
## Getting Involved
|
||||
|
||||
- **Contribute to the Project**: Check out our [contribution guidelines](/contributing) to learn how you can contribute to the Lucide project.
|
||||
- **Contribute to the Project**: Check out our [contribution guidelines](./contribute/index.md) to learn how you can contribute to the Lucide project.
|
||||
- **Report Issues**: If you encounter any bugs or have feature requests, please report them on our [GitHub Issues page](https://github.com/lucide-icons/lucide/issues).
|
||||
|
||||
## What you can do
|
||||
@@ -29,11 +29,11 @@ Contribution in form of code or new icons is always welcome, but you can also he
|
||||
|
||||
### Design New Icons
|
||||
|
||||
If you have design skills, consider contributing new icons to the Lucide library. Check out our [icon design guide](/contribute/icon-design-guide) for tips and guidelines on creating icons that fit the Lucide style.
|
||||
If you have design skills, consider contributing new icons to the Lucide library. Check out our [icon design guide](/contribute/icon-design-guide.md) for tips and guidelines on creating icons that fit the Lucide style.
|
||||
|
||||
### Contribute Code
|
||||
|
||||
If you're a developer, you can contribute code to the Lucide project. Whether it's fixing bugs, adding new features, or improving documentation, your contributions are valuable. Check out our [contribution guidelines](/contribute) for more information.
|
||||
If you're a developer, you can contribute code to the Lucide project. Whether it's fixing bugs, adding new features, or improving documentation, your contributions are valuable. Check out our [contribution guidelines](/contribute/index.md) for more information.
|
||||
|
||||
### Triage Issues
|
||||
|
||||
|
||||
@@ -13,6 +13,6 @@ This guide describes how to use the Affinity Designer template for Lucide.
|
||||
1. Download and open the [Affinity Designer template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/affinity_designer.aftemplate).
|
||||
2. Follow the [Icon Design Principles](icon-design-guide.md) while you use the template (to ensure integrity with the Lucide icon pack).
|
||||
3. Export the file as SVG (`File > Export`). Make sure that _Rastering_ is set to _Nothing_, _Export text as curves_ is checked (hopefully, you won't need this), _Use hex colors_ is checked, and _Flatten transforms_ is checked.
|
||||
|
||||
|
||||
|
||||
|
||||
4. Optimize the exported SVG file further with [SVGOMG](https://jakearchibald.github.io/svgomg/) or [`svgo`](https://github.com/svg/svgo) (using `svgo --multipass exported_icon.svg`).
|
||||
|
||||
@@ -28,7 +28,7 @@ Set the following:
|
||||
1. Stroke width: 2px
|
||||
2. Stroke alignment: center
|
||||
|
||||
|
||||
|
||||
|
||||
## Export Or Copy Your Icon
|
||||
Once you have completed your icon, you can export it.
|
||||
|
||||
@@ -11,85 +11,85 @@ Here are rules that should be followed to keep quality and consistency when maki
|
||||
|
||||
### 1. Icons must be designed on a **24 by 24 pixels** canvas.
|
||||
|
||||
|
||||
|
||||
|
||||
### 2. Icons must have at least **1 pixel padding** within the canvas.
|
||||
|
||||
|
||||
|
||||
|
||||
### 3. Icons must have a **stroke width of 2 pixels**.
|
||||
|
||||
|
||||
|
||||
|
||||
### 4. Icons must use **round joins**.
|
||||
|
||||
|
||||
|
||||
|
||||
### 5. Icons must use **round caps**.
|
||||
|
||||
|
||||
|
||||
|
||||
### 6. Icons must use **centered strokes**.
|
||||
|
||||
|
||||
|
||||
|
||||
### 7. Shapes (such as rectangles) must have a **border radius of**
|
||||
|
||||
#### A. **2 pixels** if they are at least 8 pixels in size
|
||||
|
||||
|
||||
|
||||
|
||||
#### B. **1 pixel** if they are smaller than 8 pixels in size
|
||||
|
||||
|
||||
|
||||
|
||||
### 8. Distinct elements must have **2 pixels of spacing between each other**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 9. Icons should have a similar optical volume to `circle` and `square`.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Tip:** place your icon next to the circle or square icon and blur them both; your icon should not feel much darker than the base shape.
|
||||
|
||||
### 10. Icons should be visually centered by their center of gravity.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Tip:** place your icon both above/below and next to the square or circle icon and check if it feels off center. Symmetrical icons should always be aligned to the center.
|
||||
|
||||
### 11. Icons should have similar visual density and level of detail.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Tip:** try to make abstractions to dense elements. Blur your icon, and when blurred it should not feel overly dark.
|
||||
|
||||
### 12. Continuous curves should join smoothly.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Tip:** make sure to use arcs or quadratic curves. When using cubic curves control points should have mirrored angles for smooth curves.
|
||||
|
||||
### 13. Icons should aim to be pixel perfect so that they will be sharp on low DPI displays.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Tip:** whenever possible align elements and arc centers to the grid.
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ The Illustrator template is created following guidelines from the [Icon Design G
|
||||
|
||||
5. Export the file with the export menu under: `Export > Export As..` then save the file as SVG. Select the following options in the SVG Options dialog:
|
||||
|
||||
|
||||
|
||||
|
||||
After that, double check that the [code conventions and SVG global attributes](icon-design-guide.md#code-conventions) are correct.
|
||||
|
||||
|
||||
@@ -13,11 +13,11 @@ When opening a new document, Inkscape will create a canvas of a default size. T
|
||||
|
||||
1. Open the Document Properties dialog (File -> Document Properties).
|
||||
2. On the “Page Size” tab, under “Custom Size” set the Units to `px` and set both Height and Width to 24.
|
||||
|
||||
|
||||
3. On the “Grid” tab, select `Rectangular Grid` and click “New Grid”.
|
||||
|
||||
|
||||
4. Set the Grid Units to `px` and set Spacing X and Spacing Y both to 1.
|
||||
|
||||
|
||||
5. Close the Document Properties dialog.
|
||||
6. To center the canvas in the viewport, select View -> Zoom -> Drawing.
|
||||
|
||||
@@ -25,17 +25,17 @@ When opening a new document, Inkscape will create a canvas of a default size. T
|
||||
|
||||
1. Create a path or shape.
|
||||
2. With the path selected, open the Stroke and Fill panel by pressing `Ctrl+Shift+F` on your keyboard.
|
||||
|
||||
|
||||
3. On the “Stroke Style” tab:
|
||||
* Set Stroke Width to `2px`.
|
||||
* Select the rounded join type.
|
||||
* Select the rounded cap type.
|
||||
4. If the shape is a rectangle, select the rectangle and in the top of the screen below the menu bar, set `Rx` and `Ry` to `2px`.
|
||||
|
||||
|
||||
|
||||
## Saving A File
|
||||
|
||||
1. When ready to save the file, click Save As and select “Optimized SVG” as the file type.
|
||||
|
||||
|
||||
2. After clicking Save, to conform with the other icons in the package, set Pretty Printing to use spaces and set the indentation depth to 2.
|
||||
|
||||
|
||||
|
||||
1
docs/guide/angular/index.md
Normal file
1
docs/guide/angular/index.md
Normal file
@@ -0,0 +1 @@
|
||||
# Lucide for Angular
|
||||
@@ -25,7 +25,7 @@ In addition to design, code is also important. Assets like icons can significant
|
||||
|
||||
Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information.
|
||||
|
||||
However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](./advanced/accessibility.md).
|
||||
However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](./accessibility.md).
|
||||
|
||||
## Official Packages
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@ bun add lucide
|
||||
|
||||
:::
|
||||
|
||||
For more details, see the [documentation](packages/lucide.md).
|
||||
For more details, see the [documentation](./lucide/index.md).
|
||||
|
||||
## React
|
||||
|
||||
@@ -54,7 +54,7 @@ bun add lucide-react
|
||||
|
||||
:::
|
||||
|
||||
For more details, see the [documentation](packages/lucide-react.md).
|
||||
For more details, see the [documentation](./react/index.md).
|
||||
For React Native use the `lucide-react-native` package.
|
||||
|
||||
## Vue
|
||||
@@ -81,7 +81,7 @@ bun add @lucide/vue
|
||||
|
||||
:::
|
||||
|
||||
For more details, see the [documentation](packages/lucide-vue.md).
|
||||
For more details, see the [documentation](./vue/index.md).
|
||||
|
||||
## Svelte
|
||||
|
||||
@@ -107,7 +107,7 @@ bun add @lucide/svelte
|
||||
:::
|
||||
> `@lucide/svelte` is only for Svelte 5, for Svelte 4 use the `lucide-svelte` package.
|
||||
|
||||
For more details, see the [documentation](packages/lucide-svelte.md).
|
||||
For more details, see the [documentation](./svelte/index.md).
|
||||
|
||||
## Solid
|
||||
|
||||
@@ -133,7 +133,7 @@ bun add lucide-solid
|
||||
|
||||
:::
|
||||
|
||||
For more details, see the [documentation](packages/lucide-solid.md).
|
||||
For more details, see the [documentation](./solid/index.md).
|
||||
|
||||
## Angular
|
||||
|
||||
@@ -159,7 +159,7 @@ bun add lucide-angular
|
||||
|
||||
:::
|
||||
|
||||
For more details, see the [documentation](packages/lucide-angular.md).
|
||||
For more details, see the [documentation](./angular/index.md).
|
||||
|
||||
## Preact
|
||||
|
||||
@@ -186,7 +186,7 @@ bun add lucide-preact
|
||||
|
||||
:::
|
||||
|
||||
For more details, see the [documentation](packages/lucide-preact.md).
|
||||
For more details, see the [documentation](./preact/index.md).
|
||||
|
||||
## Astro
|
||||
|
||||
@@ -212,7 +212,7 @@ bun add @lucide/astro
|
||||
|
||||
:::
|
||||
|
||||
For more details, see the [documentation](packages/lucide-astro.md).
|
||||
For more details, see the [documentation](./astro/index.md).
|
||||
|
||||
## Static usage
|
||||
|
||||
@@ -238,7 +238,7 @@ bun add lucide-static
|
||||
|
||||
:::
|
||||
|
||||
For more details, see the [documentation](packages/lucide-static.md).
|
||||
For more details, see the [documentation](./static/index.md).
|
||||
|
||||
## Figma
|
||||
|
||||
|
||||
@@ -52,7 +52,7 @@ This means that when `absoluteStrokeWidth` is enabled and the `size` of the icon
|
||||
|
||||
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
|
||||
|
||||
|
||||
|
||||
|
||||
### Adjusting stroke width with `absoluteStrokeWidth` prop
|
||||
|
||||
|
||||
@@ -37,7 +37,7 @@ This means that when `absoluteStrokeWidth` is enabled and the `size` of the icon
|
||||
|
||||
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
|
||||
|
||||
|
||||
|
||||
|
||||
### Adjusting stroke width with `absoluteStrokeWidth` prop
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ This means that when `absoluteStrokeWidth` is enabled and the `size` of the icon
|
||||
|
||||
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
|
||||
|
||||
|
||||
|
||||
|
||||
### Adjusting stroke width with `absoluteStrokeWidth` prop
|
||||
|
||||
|
||||
@@ -37,7 +37,7 @@ This means that when `absoluteStrokeWidth` is enabled and the `size` of the icon
|
||||
|
||||
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
|
||||
|
||||
|
||||
|
||||
|
||||
### Adjusting stroke width with `absoluteStrokeWidth` prop
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@ This means that when `absoluteStrokeWidth` is enabled and the `size` of the icon
|
||||
|
||||
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
|
||||
|
||||
|
||||
|
||||
|
||||
### Adjusting stroke width with `absoluteStrokeWidth` prop
|
||||
|
||||
|
||||
@@ -48,7 +48,7 @@ This means that when `absoluteStrokeWidth` is enabled and the `size` of the icon
|
||||
|
||||
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
|
||||
|
||||
|
||||
|
||||
|
||||
### Adjusting stroke width with `absoluteStrokeWidth` prop
|
||||
|
||||
|
||||
@@ -35,10 +35,10 @@ See our guides:
|
||||
- guide for [Vue](/guide/vue/getting-started)
|
||||
- guide for [Svelte](/guide/svelte/getting-started)
|
||||
- guide for [Solid](/guide/solid/getting-started)
|
||||
- guide for [Angular](/guide/angular/getting-started)
|
||||
- guide for [Preact](/guide/web-components/getting-started)
|
||||
- guide for [Astro](/guide/astro/getting-started)
|
||||
- guide for [Static](/guide/web-components/getting-started)
|
||||
<!-- - guide for [Angular](/guide/angular/getting-started) -->
|
||||
- guide for [Preact](/guide/preact/getting-started)
|
||||
<!-- - guide for [Astro](/guide/astro/getting-started)
|
||||
- guide for [Static](/guide/static/getting-started) -->
|
||||
|
||||
|
||||
## Removed All Brand Icons
|
||||
|
||||
58033
docs/icons/icons.data.ts.timestamp-1769788717204-068b449bdaee3.mjs
Normal file
58033
docs/icons/icons.data.ts.timestamp-1769788717204-068b449bdaee3.mjs
Normal file
File diff suppressed because one or more lines are too long
@@ -21,7 +21,7 @@ Lucide icon library for Astro sites and applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-astro">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/astro">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library for Angular applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-angular">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/angular">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library for Preact applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-preact">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/preact">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library for React Native applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-react-native">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/react-native">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library for React applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-react">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/react">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library for Solid applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-solid">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/solid">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library with static assets for web applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-static">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/static">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library for Svelte applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-svelte">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/svelte">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library for Vue applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-vue-next">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/vue">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library for web applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/lucide">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ Lucide icon library for Svelte 5 applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-svelte">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/svelte">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
@@ -13,7 +13,7 @@ Lucide icon library for Vue applications.
|
||||
·
|
||||
<a href="https://lucide.dev/icons/">Icons</a>
|
||||
·
|
||||
<a href="https://lucide.dev/guide/packages/lucide-vue">Documentation</a>
|
||||
<a href="https://lucide.dev/guide/vue">Documentation</a>
|
||||
·
|
||||
<a href="https://lucide.dev/license">License</a>
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user