Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lucide Npm package, reorganize scripting. #52

Merged
merged 51 commits into from
Oct 6, 2020
Merged

Lucide Npm package, reorganize scripting. #52

merged 51 commits into from
Oct 6, 2020

Conversation

ericfennis
Copy link
Member

@ericfennis ericfennis commented Jul 17, 2020 •
edited
Loading

Lucide NPM Package

I reorganize the repo to the javascript library. The main library is found in the src folder.
The scripts is containing al the build tools scripts.
In the tests folder you can find all the tests I wrote for the package, please if you have feedback or improvements feel free to contribute on this.

NOTE!: Text below is a copy from the README.md I wrote.

Usage

At its core, Featherity is a collection of 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

The following are additional ways you can use Featherity.

With the Javascript library you can easily incorporate icon in you webpage.

<i icon-name="menu"></i>

It will replace the html with a svg.

With unpkg

Here is a complete example with unpkg

<!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/featherity@latest"></script>
  <script>
    featherity.createIcons();
  </script>
</body>

With ESModules

To reduce bundle size, featherity 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.

<!-- Your HTML file -->
<i icon-name="menu"></i>
import { createIcons, icons } from 'featherity';

// 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 'featherity';

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:

import { createIcons } from 'featherity';

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

import { createIcons, Menu, ArrowRight, Globe } from 'featherity';

createIcons({
  icons: {
    Menu,
    ArrowRight,
    Globe,
  },
});

Custom Element binding

import { createElement, Menu } from 'featherity';

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);

@johnletey johnletey mentioned this pull request Aug 1, 2020
Open
@ericfennis ericfennis changed the title [WIP] Featherity Npm package, reorganize scripting. Featherity Npm package, reorganize scripting. Aug 18, 2020
@ericfennis

This comment has been minimized.

Sign in to view
@ericfennis ericfennis marked this pull request as ready for review August 19, 2020 19:37
locness3
locness3 reviewed Sep 25, 2020
View reviewed changes
README.md Outdated Show resolved Hide resolved
locness3
locness3 reviewed Sep 25, 2020
View reviewed changes
README.md Outdated Show resolved Hide resolved
@ericfennis ericfennis changed the title Featherity Npm package, reorganize scripting. Lucide Npm package, reorganize scripting. Oct 6, 2020
@ericfennis ericfennis merged commit 11c6a2e into lucide-icons:master Oct 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@johnletey johnletey Awaiting requested review from johnletey

@locness3 locness3 Awaiting requested review from locness3

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ericfennis @locness3