Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0d0e3181cf | ||
|
|
cfd7d8a871 | ||
|
|
9c0718a5ae | ||
|
|
47a3c62ff0 | ||
|
|
66d699dbe9 | ||
|
|
e7c4542aaf | ||
|
|
7ca40f417a | ||
|
|
e2444337a0 | ||
|
|
f68aefeeb2 | ||
|
|
4c4f3f4eef | ||
|
|
5ccadc68f4 | ||
|
|
15a927847b | ||
|
|
ed619f0dff | ||
|
|
2502207a1e | ||
|
|
a17c37e389 |
@@ -15,7 +15,7 @@ With help of the community, contributors are providing the library of new icons.
|
||||
|
||||
When designing new icons, the community is working with a set of design rules. This is to keep icons: recognizable, consistency in style, and readable on all sizes. The community likes to have creativity in new icons but conventional design is important to have recognizable icons.
|
||||
|
||||
Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for three-shaking abilities. With three-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
|
||||
Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. With tree-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
|
||||
|
||||
Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ This package include the following lucide implementations:
|
||||
|
||||
This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project.
|
||||
|
||||
> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Threeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
|
||||
> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Treeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 407 B After Width: | Height: | Size: 407 B |
|
Before Width: | Height: | Size: 361 B After Width: | Height: | Size: 361 B |
|
Before Width: | Height: | Size: 360 B After Width: | Height: | Size: 360 B |
15
icons/baseline.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4 20h16" />
|
||||
<path d="M6 16l6-12 6 12" />
|
||||
<path d="M8 12h8" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 286 B |
21
icons/keyboard.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<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"
|
||||
>
|
||||
<rect x="2" y="4" width="20" height="16" rx="2" ry="2" />
|
||||
<path d="M6 8h.001" />
|
||||
<path d="M10 8h.001" />
|
||||
<path d="M14 8h.001" />
|
||||
<path d="M18 8h.001" />
|
||||
<path d="M8 12h.001" />
|
||||
<path d="M12 12h.001" />
|
||||
<path d="M16 12h.001" />
|
||||
<path d="M7 16h10" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 475 B |
16
icons/rocket.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z" />
|
||||
<path d="M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z" />
|
||||
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
|
||||
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 528 B |
@@ -9,6 +9,6 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z" />
|
||||
<line x1="7" y1="7" x2="7.01" y2="7" />
|
||||
<path d="M2 12V2h10l9.44 9.44a2 2 0 0 1 0 2.82l-7.18 7.18a2 2 0 0 1-2.82 0L2 12Z" />
|
||||
<path d="M7 7h.01" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 341 B After Width: | Height: | Size: 319 B |
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-angular",
|
||||
"description": "A Lucide icon library package for Angular applications",
|
||||
"version": "0.17.8",
|
||||
"version": "0.17.13",
|
||||
"author": "SMAH1",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
name: lucide_icons
|
||||
description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
|
||||
version: 0.17.8
|
||||
version: 0.17.13
|
||||
homepage: https://lucide.dev
|
||||
repository: https://github.com/lucide-icons/lucide
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-preact",
|
||||
"description": "A Lucide icon library package for Preact applications",
|
||||
"version": "0.17.8",
|
||||
"version": "0.17.13",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
|
||||
@@ -16,7 +16,7 @@ npm install lucide-react
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
It's built with ES modules so it's completely threeshakable.
|
||||
Each icon can be imported as a react component.
|
||||
|
||||
### Example
|
||||
@@ -25,9 +25,7 @@ You can pass additional props to adjust the icon.
|
||||
|
||||
``` js
|
||||
import { Camera } from 'lucide-react';
|
||||
// Returns ReactComponent
|
||||
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera color="red" size={48}/>
|
||||
};
|
||||
@@ -48,19 +46,16 @@ export default App;
|
||||
You can also pass custom props that will be added in the svg as attributes.
|
||||
|
||||
``` js
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera fill="red"/>
|
||||
};
|
||||
```
|
||||
|
||||
### One generic icon component
|
||||
### Generic icon component
|
||||
|
||||
It is possible to create one generic icon component to load icons.
|
||||
It is possible to create a generic icon component to load icons.
|
||||
|
||||
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
|
||||
|
||||
#### Icon Component Example
|
||||
> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
|
||||
|
||||
``` js
|
||||
import * as icons from 'lucide-react';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-react",
|
||||
"description": "A Lucide icon library package for React applications",
|
||||
"version": "0.17.8",
|
||||
"version": "0.17.13",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-svelte",
|
||||
"description": "A Lucide icon library package for Svelte applications",
|
||||
"version": "0.17.8",
|
||||
"version": "0.17.13",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lucide-vue-next",
|
||||
"version": "0.17.8",
|
||||
"version": "0.17.13",
|
||||
"author": "Eric Fennis",
|
||||
"description": "A Lucide icon library package for Vue 3 applications",
|
||||
"license": "ISC",
|
||||
@@ -38,6 +38,6 @@
|
||||
"vue-jest": "^5.0.0-alpha.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "3.0.1"
|
||||
"vue": ">=3.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lucide-vue",
|
||||
"version": "0.17.8",
|
||||
"version": "0.17.13",
|
||||
"author": "Eric Fennis",
|
||||
"description": "A Lucide icon library package for Vue 2 applications",
|
||||
"license": "ISC",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide",
|
||||
"description": "A Lucide icon library package for web and javascript applications.",
|
||||
"version": "0.17.8",
|
||||
"version": "0.17.13",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
|
||||
3
site/public/framework-logos/laravel.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="34.6" height="36" viewBox="0 0 50 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M49.626 11.564a.809.809 0 0 1 .028.209v10.972a.8.8 0 0 1-.402.694l-9.209 5.302V39.25c0 .286-.152.55-.4.694L20.42 51.01c-.044.025-.092.041-.14.058-.018.006-.035.017-.054.022a.805.805 0 0 1-.41 0c-.022-.006-.042-.018-.063-.026-.044-.016-.09-.03-.132-.054L.402 39.944A.801.801 0 0 1 0 39.25V6.334c0-.072.01-.142.028-.21.006-.023.02-.044.028-.067.015-.042.029-.085.051-.124.015-.026.037-.047.055-.071.023-.032.044-.065.071-.093.023-.023.053-.04.079-.06.029-.024.055-.05.088-.069h.001l9.61-5.533a.802.802 0 0 1 .8 0l9.61 5.533h.002c.032.02.059.045.088.068.026.02.055.038.078.06.028.029.048.062.072.094.017.024.04.045.054.071.023.04.036.082.052.124.008.023.022.044.028.068a.809.809 0 0 1 .028.209v20.559l8.008-4.611v-10.51c0-.07.01-.141.028-.208.007-.024.02-.045.028-.068.016-.042.03-.085.052-.124.015-.026.037-.047.054-.071.024-.032.044-.065.072-.093.023-.023.052-.04.078-.06.03-.024.056-.05.088-.069h.001l9.611-5.533a.801.801 0 0 1 .8 0l9.61 5.533c.034.02.06.045.09.068.025.02.054.038.077.06.028.029.048.062.072.094.018.024.04.045.054.071.023.039.036.082.052.124.009.023.022.044.028.068zm-1.574 10.718v-9.124l-3.363 1.936-4.646 2.675v9.124l8.01-4.611zm-9.61 16.505v-9.13l-4.57 2.61-13.05 7.448v9.216l17.62-10.144zM1.602 7.719v31.068L19.22 48.93v-9.214l-9.204-5.209-.003-.002-.004-.002c-.031-.018-.057-.044-.086-.066-.025-.02-.054-.036-.076-.058l-.002-.003c-.026-.025-.044-.056-.066-.084-.02-.027-.044-.05-.06-.078l-.001-.003c-.018-.03-.029-.066-.042-.1-.013-.03-.03-.058-.038-.09v-.001c-.01-.038-.012-.078-.016-.117-.004-.03-.012-.06-.012-.09v-.002-21.481L4.965 9.654 1.602 7.72zm8.81-5.994L2.405 6.334l8.005 4.609 8.006-4.61-8.006-4.608zm4.164 28.764l4.645-2.674V7.719l-3.363 1.936-4.646 2.675v20.096l3.364-1.937zM39.243 7.164l-8.006 4.609 8.006 4.609 8.005-4.61-8.005-4.608zm-.801 10.605l-4.646-2.675-3.363-1.936v9.124l4.645 2.674 3.364 1.937v-9.124zM20.02 38.33l11.743-6.704 5.87-3.35-8-4.606-9.211 5.303-8.395 4.833 7.993 4.524z" fill="#FF2D20" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -12,6 +12,7 @@ import PreactLogo from '../../public/framework-logos/preact.svg';
|
||||
import AngularLogo from '../../public/framework-logos/angular.svg';
|
||||
import FlutterLogo from '../../public/framework-logos/flutter.svg';
|
||||
import SvelteLogo from '../../public/framework-logos/svelte.svg';
|
||||
import LaravelLogo from '../../public/framework-logos/laravel.svg';
|
||||
|
||||
function generateZip(icons) {
|
||||
const zip = new JSZip();
|
||||
@@ -71,6 +72,11 @@ const Header = ({ data }) => {
|
||||
Logo: FlutterLogo,
|
||||
href: '/docs/lucide-flutter',
|
||||
},
|
||||
{
|
||||
name: 'lucide-laravel',
|
||||
Logo: LaravelLogo,
|
||||
href: 'https://github.com/mallardduck/blade-lucide-icons',
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
36
tags.json
@@ -72,7 +72,7 @@
|
||||
"flex",
|
||||
"justify"
|
||||
],
|
||||
"align-horizonal-distribute-center": [
|
||||
"align-horizontal-distribute-center": [
|
||||
"items",
|
||||
"flex",
|
||||
"justify",
|
||||
@@ -80,13 +80,13 @@
|
||||
"evenly",
|
||||
"around"
|
||||
],
|
||||
"align-horizonal-distribute-end": [
|
||||
"align-horizontal-distribute-end": [
|
||||
"right",
|
||||
"items",
|
||||
"flex",
|
||||
"justify"
|
||||
],
|
||||
"align-horizonal-distribute-start": [
|
||||
"align-horizontal-distribute-start": [
|
||||
"left",
|
||||
"items",
|
||||
"flex",
|
||||
@@ -311,6 +311,11 @@
|
||||
"diagram",
|
||||
"graph"
|
||||
],
|
||||
"baseline": [
|
||||
"text",
|
||||
"format",
|
||||
"color"
|
||||
],
|
||||
"battery": [
|
||||
"power",
|
||||
"electricity"
|
||||
@@ -400,7 +405,8 @@
|
||||
],
|
||||
"bold": [
|
||||
"text",
|
||||
"strong"
|
||||
"strong",
|
||||
"format"
|
||||
],
|
||||
"book": [
|
||||
"read",
|
||||
@@ -1300,7 +1306,8 @@
|
||||
],
|
||||
"italic": [
|
||||
"oblique",
|
||||
"text"
|
||||
"text",
|
||||
"format"
|
||||
],
|
||||
"japanese-yen": [
|
||||
"currency",
|
||||
@@ -1313,6 +1320,12 @@
|
||||
"authentication",
|
||||
"secure"
|
||||
],
|
||||
"keyboard": [
|
||||
"layout",
|
||||
"spell",
|
||||
"settings",
|
||||
"mouse"
|
||||
],
|
||||
"landmark": [
|
||||
"bank",
|
||||
"building",
|
||||
@@ -1873,6 +1886,13 @@
|
||||
"rewind": [
|
||||
"music"
|
||||
],
|
||||
"rocket": [
|
||||
"release",
|
||||
"boost",
|
||||
"launch",
|
||||
"space",
|
||||
"version"
|
||||
],
|
||||
"rocking-chair": [
|
||||
"chair",
|
||||
"furniture",
|
||||
@@ -2219,7 +2239,8 @@
|
||||
"strikethrough": [
|
||||
"cross out",
|
||||
"delete",
|
||||
"remove"
|
||||
"remove",
|
||||
"format"
|
||||
],
|
||||
"subscript": [
|
||||
"text"
|
||||
@@ -2417,7 +2438,8 @@
|
||||
"weather"
|
||||
],
|
||||
"underline": [
|
||||
"text"
|
||||
"text",
|
||||
"format"
|
||||
],
|
||||
"undo": [
|
||||
"redo",
|
||||
|
||||