npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

elt-fa

v0.7.0

Published

some description

Downloads

1

Readme

Use font-awesome with elt without hassle

npm install elt-fa

This library allows you to use fontawesome with elt easily.

While you can use font-awesome with its icon font packs (ttf/woff/...) and <i> tags, you end up having to download the whole font everytime you use it, even if using just a small subset. Also, icon fonts are not that great (https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/ or https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/).

elt-fa instead goes the svg route ; when installing it, it will get all the .svg files in @fortawesome/fontawesome-free or @fortawesome/fontawesome-pro if you are a subscriber and compile them into .tsx files ready to be imported in your project.

Icon styles are used with suffixes for individual icons (-regular, -light, -duotone or -solid). You can use the regular icon name without suffix, in which case it will use whichever version was imported last.

It exports two ways of using icons ; I(), which can take an o.RO<string> and returns a dynamic icon that may change, or <I name='...'> which looks more like tsx code and makes it easier to assign classes, but which uses a static icon name.

There is no need to declare CSS or import a file, elt-fa injects its own style node at the end of <head>.

You need to import all the icons you use one by one. If you don't, then the icon will not be recognized and this will result in a compilation error, which is what we actually want.

NOTE : You MUST add yourself a dependency of @fortawesome/fontawesome-pro in your project before installing elt-fa for it to find the pro icons.

When using duotone icons, use the classes .fa-primary and .fa-secondary in your CSS to style the icons. elt-fa does not define anything special about these classes except the fact that their fill css property uses currentcolor. Font awesome defines an opacity on the secondary, but this was discarded to keep flexibility.

Do not hesitate to do something like this in your css.

.fa-secondary {
  opacity: 0.4; /* original value */
}

How to use it

import { setup_mutation_observer } from 'elt'
setup_mutation_observer(document.body)

import { I } from 'elt-fa'

import 'elt-fa/power-off-duotone'
import 'elt-fa/user-solid'
import 'elt-fa/search-duotone'
import 'elt-fa/search-solid'

document.body.appendChild(<div>
  {/* Pick your poison. */}
  {I('power-off')}
  {I('power-off-duotone')}
  {I('power-off', { class: 'some-class' })} {/* I accepts classic arguments for SVGSVGElement */}
  {I('not-imported')} {/* compile error */}
  {I('user', svg_node => { /* you can use decorators also if needed */ })}

  <I name='power-off' class='some-class'/> {/* classic style is also supported */}
  <I name='search'>
    <path d='M40 10 L230 118'> {/* children are appended at the end of the svg */}
    {node => { /* decorators are also usable with this form */ }}
  </I>
</div>)