swcs/lucide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Featherity Npm package, reorganize scripting. (#52)

Browse Source 
* New setup for new NPM package

* Add build scripts for dist

* Add introduction readme

* Refactor names

* update package.json

* remove log

* rename variable

* Factoring

* Improve optimize script

* Add eslint config

* Eslint fixes

* rename import

* Move packeges

* Setup rollup and build progress

* Refactor scripts

* fix lint error

* remove lint disabler

* Bring back old libraries

* add indentation

* reset packages directory

* remove vscode setting files

* 0.1.0-alpha.0

* new version

* 0.1.0-alpha.1

* Fix build process

* Add create element to the entry file

* update version number

* publish new alhpa version

* fixing bugs

* Add jest and tests

* replace with XML createElement

* set new version

* Fix svg generation

* Add tests for main library

* Update docs

* Adjust tests and selectors

* update the spec

* Update README.md

* Update README.md

* Update README.md

* update version

* Update README.md

* Move function to helpers file

* rename license, package and readme

* Fix build files

* rename packages

Co-authored-by: Eric Fennis <eric.fennis@endurance.com>
This commit is contained in:
Eric Fennis
2020-10-06 20:23:26 +02:00
committed by GitHub
parent 8b5278437a
commit 11c6a2e917
38 changed files with 4953 additions and 3858 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+124 -8
View File
@@ -1,10 +1,10 @@
# Featherity
# Lucide
[![Discord](https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA)](https://discord.gg/EH6nSts)
## What is Featherity?
## What is Lucide?
Featherity is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
Note that we are completely independent from Feather, so **icons submitted here won't get added to Feather Icons or its associated librairies**.
@@ -15,11 +15,127 @@ Note that we are completely independent from Feather, so **icons submitted here
* [Contributing](#contributing)
* [License](#license)
## Installation
### Package Managers
``` bash
npm install lucide
#or
yarn add lucide
```
### CDN
``` html
<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<!-- Production version -->
<script src="https://unpkg.com/lucide@latest"></script>
```
## Usage
At its core, Featherity 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 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)
The following are additional ways you can use Featherity.
The following are additional ways you can use Lucide.
With the Javascript library you can easily incorporate the icon you want in your webpage.
### With unpkg
Here is a complete example with unpkg
```html
<!DOCTYPE html>
<body>
<i icon-name="volume-2" class="my-class"></i>
<i icon-name="x"></i>
<i icon-name="menu"></i>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
lucide.createIcons();
</script>
</body>
```
### With ESModules
To reduce bundle size, lucide is build to be fully threeshakeble.
The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
```html
<!-- Your HTML file -->
<i icon-name="menu"></i>
```
```js
import { createIcons, icons } from 'lucide';
// Caustion, this will import all the icons and bundle them.
createIcons({icons});
// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
```
#### Additional Options
In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes.
Here is a full example:
```js
import { createIcons } from 'lucide';
createIcons({
attrs: {
class: ['my-custom-class', 'icon'],
'stroke-width': 1,
stroke: '#333',
},
nameAttr: 'icon-name', // atrribute for the icon name.
});
```
#### Threeshake the library, only use the icons you use
```js
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
```
#### Custom Element binding
```js
import { createElement, Menu } from 'lucide';
const menuIcon = createElement(Menu); // Returns HTMLElement (svg)
// set custom attributes with browser native functions
menuIcon.setAttribute('stroke', '#333');
menuIcon.classList.add('my-icon-class');
// Append HTMLElement in webpage
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);
```
### Figma
@@ -27,9 +143,9 @@ You can use the components from [this Figma file](https://www.figma.com/file/g0U
## Contributing
For more info on how to contribute please see the [contribution guidelines](https://github.com/featherity/featherity/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/featherity/featherity/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)
## Community
@@ -37,4 +153,4 @@ Join the community on our [Discord](https://discord.gg/EH6nSts) server!
## License
Featherity is licensed under the [ISC License](https://github.com/featherity/featherity/blob/master/LICENSE).
Lucide is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).