* Fix for flutter release package
* Lowercase font name for flutter package
* Simplify assets copying
* Update .github/workflows/release.yml
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Created selection-flag start and end flag
* Update icons/selection-flag-start.svg
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Update icons/selection-flag-end.svg
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Rename selection-flag-start.svg to flag-triangle-right.svg
* Rename selection-flag-end.svg to flag-triangle-left.svg
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Added the template and changed corresponding documentation
Added the illustrator template and created (ILLUSTRATOR_GUIDE.md) oder changed (CONTRIBUTING.md) files.
* fixed typo
* split up template instruction docs for programs
documentation concerning the templates and instrcutions is now separated in the documentation.
* updated illustrator export documentation
updated illustrator guide with the according options for exporting SVGs
* updated image path
image path should be correct now
* matching filenames
files names illustrator guide should match file name in /images
* image in illustrator guide path correction
image should work now
* layout adjustments to illustrator guide
layout should be pretty now
* layout corrections second try
* add square function icon
* change path to rect tag
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Fix icon
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Rename square-function.svg to function-square.svg
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Add preact package
* Fix types
* update types
* fix types
* remove dependecies
* bump version
* improve test setup for react as well
* Add workflow for preact
* Fix types
* bump version
* Add white space
* remove forward ref
* bump package
* Fix types
* Fix types
* bump version
* Remove proptypings
* Test new version
* Add some extra documentation
* add configs
* Add vue components
* Add documentation
* add alpha release version
* improve npm ignore files
* add tests
* Make style and class attrs work
* 📦 bump version
* Add Icon suffix for component names
* bump version
* Add icon component example
* remove space
* add new build strategy
* Write a better intro
* add other node design
* fix
* add new default template
* add tempalte
* improve code
* small improvements
* small improvements
* move files
* Connect lucide with lucide-react
* Add support for vue
* Add licenses to packages
* Fix tests
* refactor build scripts
* Minor code fixes
* update homepage readme
* Update footer text
* Add a better introduction to packages
* Split up in tempaltes
* Add new types build file
* Setup workflow file
* update readme
* update
* Fix build
* remove debug code
* Add check if svgs have duplicated children
* Add check if their are no children
* small fixes
* last fixes in the build
* Move script to packages folder
* Fix tests and add types for lucide
* Add rule to package.json
* add types in build
* add npm ignore
* update package.jsons
* Generate types for all exported icons
* renderUniqueKey will generate duplicate keys if the SVG attributse are identical.
Fixed by adding an index attribute to the hash.
* Revert "renderUniqueKey will generate duplicate keys if the SVG attributse are identical. Fixed by adding an index attribute to the hash."
This reverts commit 1c42b39e
* Update packages/lucide-react/build-types.js
* Update packages/lucide-react/build-types.js
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Create server-off.svg
Hello,
I've made a server-off icon.
* Update icons/server-off.svg
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Create monitor-off.svg
Added Monitor Off icon.
* Update monitor-off.svg
Updated the icon to match the design guide.
* Update icons/monitor-off.svg
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* feat: ability to customize icons before downloading PNG or SVG
* feat: change color input to be a graphical color picker
* feat: tweak appearance of new inputs
* fix: switch to correct Chakra-UI@Next slider syntax
* fix: make default color `currentColor` and also add Reset button
* fix: move background color from search bar InputGroup to Input
* fix: add margins and border radius to color picker components
* fix: Downgrade color picker to version (see: https://github.com/casesandberg/react-color/issues/731)
* feat: ability to customize icons before downloading PNG or SVG
* feat: change color input to be a graphical color picker
* feat: tweak appearance of new inputs
* fix: switch to correct Chakra-UI@Next slider syntax
* fix: make default color `currentColor` and also add Reset button
* feat: add box select, box select with pointer, bullhorn, document lost, document search, lasso select, lasso, newspaper
* remove other icons on this branch
* more space for box-select
* maybe similarly spacing box-sel-ptr
* focus down to box select
* try dashed-line square
* polylines at corners
* space before close-element
* rounded version
* undo change to wrong file
Co-authored-by: mishkaio <60020191+mishkaio@users.noreply.github.com>
* feat: Add `undo` and `redo` icons
* move undo and redo icons downl to align with grid
* move starting point of arrows down to align with point
* refactor: remove extra stroke-width
* reactor: whitespace
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* refactor: replace change points instead of using translate.
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* refactor: use changed points instead of using translate.
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* feat: Add `battery` icons
* refactor: Use elements for `battery-charging`
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* refactor: Use elements for `battery-full`
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* refactor: Use elements for `battery-low`
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* refactor: Use elements for `battery-medium`
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* refactor: Use elements for `battery`
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a 👍.
A note about brand logos and related material : We follow the decision from Feather Icons (https://github.com/feathericons/feather/issues/763) to deprecate icons relating to brands.
You will find some in the set, but we won't add any new ones. https://simpleicons.org has 24x24 SVG icons for this purpose.
:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
The following is a set of guidelines for contributing to Feather. Feel free to propose changes to this document in a pull request.
The following is a set of guidelines for contributing to Lucide. Feel free to propose changes to this document in a pull request.
## Pull Requests
> **Note:** At the moment we are not accepting pullrequests containing _**icons**_. The best way to contribute an icon is to create an issue with a screenshot and link to an SVG of your icon.
Pull requests for new features, bug fixes, etc. are often appreciated. Please checkout the [project roadmap](https://github.com/colebemis/feather#roadmap) and raise an issue to discuss any of the items on the list.
Feel free to open a pull-request to contribute to this project.
**Working on your first Pull Request?** You can learn how from this *free* series
[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
Guidelines for pull requests:
- __Make your commit messages as descriptive as possible.__ Include as much information as you can. Explain anything that the file diffs themselves won’t make apparent.
- __Document your pull request__. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `master` branch.
- __Include only related work__. If your pull request has unrelated commit, it won't be accepted.
### Pull Requests Including Icons
#### 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](docs/ICON_DESIGN_GUIDE.md).
### Templates
Here you can find templates and instructions on how to implement the guidelines with different programs.
#### Adobe Illustrator
`Template`: You can find a template for Adobe Illustrator under `/docs/templates/illustrator-template.ai`.
`Instructions`: You can find the [Illustrator Guide](/docs/ILLUSTRATOR_GUIDE.md) and how to work with the template in `/docs/ILLUSTRATOR_GUIDE.md`.
#### Inkscape
`Template`: None
`Instructions`: You can find the [Inkscape Guide](/docs/INKSCAPE_GUIDE.md) and how to set up Inkscape under `/docs/INKSCAPE_GUIDE.md`.
#### Submitting Mulitple Icons
If you want submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keep the thread clean and scoped.
So don't submit multiple icons in one PR that have noting to do with each other.
So for example don't create one PR with icons: `arrow-up`, `bicycle`, `arrow-down`.
Seperate them by two PRs; 'pr-01' `arrow`, `arrow-down` and 'pr-02' `bicycle`.
## Icon Requests
Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a :+1:.
If the icon has not already been requested, [create an issue](https://github.com/colebemis/feather/issues/new?title=Icon%20Request:) with a title of `Icon request: <icon name>` and add as much information as possible.
If the icon has not already been requested, [create an issue](https://github.com/lucide-icons/lucide/issues/new?title=Icon%20Request:) with a title of `Icon request: <icon name>` and add as much information as possible.
## Bug Reports
## Icon Requests from Feather
Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a :+1: and/or leave a comment with additional information.
When creating a new issue make sure to include the following:
- Version of `Feather` in use. Are you running from source/master? Are you using a released build? Which release?
- Your environment. What is your operating system? 32 or 64 bits?
- Step to reproduce. Even if the step is only one line change, __include it!__ Include the actual result and what you expected.
- Any message or error you get in the console, if you do.
- A screenshot of any visual bug.
Here is what a great bug report would look like:
```
## Prerequisites
Version: Release v3.1.0
Running from: Import using webpack
Operating system: Mac OSX
Bits: 64 bits
## Step to reproduce
- Import `check` icon
- Add to a React component/view
- Run the react app
- Notice that the `check` isn't rendering correctly which seems a encoding problem
### Actual behavior:
- Import `check` icon
- Add to a React component/view
- Run the react app
- Check is displayed with correct encoding (e.g UTF-8)
## Any message or error
No console output
...
## Resources
No resources
...
```
If you are a designer who wants to contribute to Lucide but you don't know what icons to work on, then have a look at the Requests from Feather. All open, unfinished and valid requests can be found in [Feather Icon Requests](https://github.com/lucide-icons/lucide/issues/119).
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.
## What is Lucide?
https://feathericons.com
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
```shell
npm install feather-icons
```
It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!
### Why choose Lucide over Feather Icons
- Lucide already expanded the icon set by 130+ in less then a year, so more icons to work with.
At its core, Feather is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
The following are additional ways you can use Feather.
The following are additional ways you can use Lucide.
With the Javascript library you can easily incorporate the icon you want in your webpage.
### Client-side JavaScript
### Web
#### 1. Install
Implementation of the lucide icon library for web applications.
> **Note:** If you intend to use Feather with a CDN, you can skip this installation step.
```sh
npm install lucide
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
#or
```shell
npm install feather-icons --save
yarn add lucide
```
Or just copy [`feather.js`](https://unpkg.com/feather-icons/dist/feather.js) or [`feather.min.js`](https://unpkg.com/feather-icons/dist/feather.min.js) into your project directory. You don't need both `feather.js` and `feather.min.js`.
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide#lucide).
#### 2. Include
### React
Include `feather.js` or `feather.min.js` with a `<script>` tag:
Implementation of the lucide icon library for react applications.
```html
<scriptsrc="path/to/dist/feather.js"></script>
```sh
yarn add lucide-react
# or
npm install lucide-react
```
> **Note:** `feather.js` and `feather.min.js` are located in the `dist` directory of the npm package.
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react#lucide-react).
Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue
# or
npm install lucide-vue
```
After including the script, `feather` will be available as a global variable.
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue).
#### 3. Use
### Vue 3
To use an icon on your page, add a `data-feather` attribute with the icon name to an element:
Implementation of the lucide icon library for vue applications.
```html
<idata-feather="circle"></i>
```sh
yarn add lucide-vue-next
# or
npm install lucide-vue-next
```
See the complete list of icons at [feathericons.com](https://feathericons.com).
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next).
#### 4. Replace
### Angular
Call the `feather.replace()` method:
```sh
yarn add lucide-angular
```html
<script>
feather.replace()
</script>
# or
npm install lucide-angular
```
All elements that have a `data-feather` attribute will be replaced with SVG markup corresponding to their `data-feather` attribute value. See the [API Reference](#api-reference) for more information about `feather.replace()`.
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-angular#lucide-angular).
### Node
#### 1. Install
### Preact
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm):
Implementation of the lucide icon library for preact applications.
```shell
npm install feather-icons --save
```sh
yarn add lucide-preact
# or
npm install lucide-preact
```
#### 2. Require
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact#lucide-preact).
> **Note:** `circle` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com).
However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
Feather is available as a [Figma component library](https://www.figma.com/file/dyJRSFTIajik4cdkcXN8yA3K/Feather-Component-Library). To use the components, log in to your Figma account and **duplicate** the file to your drafts.
## API Reference
The lucide figma plugin.
### `feather.icons`
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
feather.icons.x.toString()
// '<line ... /><line ... />'
```sh
composer require mallardduck/blade-lucide-icons
```
> **Note:** `x` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com). Icons with multi-word names (e.g. `arrow-right`) **cannot** be accessed using dot notation (e.g. `feather.icons.x`). Instead, use bracket notation (e.g. `feather.icons['arrow-right']`).
For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
Implementation of Lucide icon library for Flutter applications.
### `feather.icons[name].toSvg([attrs])`
Returns an SVG string.
#### Parameters
| Name | Type | Description |
| --------- | ------ | ----------- |
| `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `attrs` object. |
> **Hint:** You might find these SVG attributes helpful for manipulating icons:
Replaces all elements that have a `data-feather` attribute with SVG markup corresponding to the element's `data-feather` attribute value.
#### Parameters
| Name | Type | Description |
| ---------- | ------ | ----------- |
| `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `attrs` object. |
#### Usage
> **Note:** `feather.replace()` only works in a browser environment.
> **Note:** `feather.toSvg()` is deprecated. Please use `feather.icons[name].toSvg()` instead.
Returns an SVG string.
#### Parameters
| Name | Type | Description |
| --------- | ------ | ----------- |
| `name` | string | Icon name |
| `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `attrs` object. |
For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).
## Contributing
For more info on how to contribute please see the [contribution guidelines](https://github.com/colebemis/feather/blob/master/CONTRIBUTING.md).
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md).
Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/colebemis/feather/blob/master/README.md)
Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/master/README.md)
## Related Projects
## Community
- [angular-feather](https://github.com/michaelbazos/angular-feather) - Feather icons for Angular applications
- [elm-feather](https://github.com/1602/elm-feather) - Feather icons for Elm applications
- [react-feather](https://github.com/carmelopullara/react-feather) - Feather icons as React components
- [sketch-feather](https://github.com/odmln/sketch-feather) - Feather icons as a Sketch library
- [vue-feather-icons](https://github.com/egoist/vue-feather-icons) - Feather icons as Vue components
- [php-feather](https://github.com/Pixelrobin/php-feather) - Feather icons as a PHP Library
- [django-feather](https://pypi.org/project/django-feather/) - Feather icons as Django Template Tag
- [svelte-feather-icons](https://github.com/dylanblokhuis/svelte-feather-icons) - Feather icons as Svelte components
Join the community on our [Discord](https://discord.gg/EH6nSts) server!
## License
Feather is licensed under the [MIT License](https://github.com/colebemis/feather/blob/master/LICENSE).
Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).
This Guide explains how to properly use the Adobe Illustrator Template for Lucide.
>Attention: Even though it is unlikely the template can be outdated or not 100% correct. Please check the Icon Design Guide before you start working with the template to ensure integrity with the Lucide icon pack.
## General Workflow
The Illustrator template is created following guidelines from the [Icon Design Guide](ICON_DESIGN_GUIDE.md).
**Workflow:**
1. Open the Document which can be found under __*/docs/templates/illustrator_template.ai*__ .
2. You can now remove the content from the example logo layer ("Draw") and start creating.
3. Verify that you follow the [Icon Design Guidelines](ICON_DESIGN_GUIDE.md).
4. Before you export the file as an SVG make sure to check that you followed the guidelines and remove all unecessary layers (especially "Padding" and "Grid").
5. Export the file with the export menu under: `Export > Export As..` than safe 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](https://github.com/lucide-icons/lucide/blob/master/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct.
7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!
### Why choose Lucide over Feather Icons
- Lucide already expended the icon set by 130+ in less then a year, so more icons to work with.
- Well maintained code base.
- Active community.
## Getting Started
At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
### Using Lucide packages
### Web
Implementation of the lucide icon library for web applications.
```sh
npm install lucide
#or
yarn add lucide
```
For more details, see the [documentation](lucide).
### React
Implementation of the lucide icon library for react applications.
```sh
yarn add lucide-react
# or
npm install lucide-react
```
For more details, see the [documentation](lucide-react).
### Vue 2
Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue
# or
npm install lucide-vue
```
For more details, see the [documentation](lucide-vue).
### Vue 3
Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue-next
# or
npm install lucide-vue-next
```
For more details, see the [documentation](lucide-vue-next).
### Angular
```sh
yarn add lucide-angular
# or
npm install lucide-angular
```
For more details, see the [documentation](lucide-angular).
### Preact
Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
# or
npm install lucide-preact
```
For more details, see the [documentation](lucide-preact).
### Figma
The lucide figma plugin.
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
### One generic icon component
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
Implementation of the lucide icon library for react applications
## Installation
```sh
yarn add lucide-react
# or
npm install lucide-react
```
## How to use
It's build with ESmodules so it's completely threeshakable.
Each icon can be imported as a react component.
### Example
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}/>
};
export default App;
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` js
// Usage
const App = () => {
return <Camera fill="red"/>
};
```
### One generic icon component
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
Implementation of the lucide icon library for Vue 3 applications.
> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue)
## Installation
```sh
yarn add lucide-vue-next
# or
npm install lucide-vue-next
```
## How to use
It's build with ESmodules so it's completely threeshakable.
Each icon can be imported as a vue component.
### Example
You can pass additional props to adjust the icon.
``` vue
<template>
<Camera
color="red"
:size="32"
/>
</template>
<script>
// Returns Vue component
import { Camera } from 'lucide-vue-next';
export default {
name: "My Component",
components: { Camera }
}
</script>
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` vue
<template>
<Camera fill="red" />
</template>
```
### One generic icon component
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
Implementation of the lucide icon library for Vue applications.
> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next)
## Installation
```sh
yarn add lucide-vue
# or
npm install lucide-vue
```
## How to use
It's build with ESmodules so it's completely threeshakable.
Each icon can be imported as a vue component.
### Example
You can pass additional props to adjust the icon.
``` vue
<template>
<Camera
color="red"
:size="32"
/>
</template>
<script>
// Returns Vue component
import { Camera } from 'lucide-vue';
export default {
name: "My Component",
components: { Camera }
}
</script>
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` vue
<template>
<Camera fill="red" />
</template>
```
### One generic icon component
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.