Add JavaScript icon loader similar to feather-icons

bloycey commented 3 years ago

Description

This PR includes a script that generates a JS file that will look for any HTML elements with a data-heroicons attribute and replace it with the relevant heroicons SVG. Ideally this file would be hosted on a CDN somewhere for easy use.

E.g.

<i data-heroicons="academic-cap" class="inline-block"></i>

will become

<span class="inline-block">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path fill="#fff" d="M12 14l9-5-9-5-9 5 9 5z" />
    <path fill="#fff" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
  </svg>
</span>

Note that all classes are passed through.

By default the solid version of the icon will be used, however you can also pass the attribute data-icon-type="outline" to instead use the outline version of the icon.

The code runs on page load. However it can also be manually invoked by calling heroiconsLoader.replaceAllIcons();;

Motivation and Context

When browsing through HTML code SVGs are not very readable. It's unclear, just from looking at the code, what the icon represents. SVG code can also be quite lengthy and add visual noise to the page.

Other libraries offer similar functionality to this. In fact, this PR is very much inspired by feather-icons. And some of the code has been borrowed from their repo.

Types of Changes

[ ] Bug fix (non-breaking change that fixes an issue)
[x] New feature (non-breaking change that adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

To Do

I have not yet written formal documentation for this in the README. If this PR is supported I will happily add this information.

micha149 commented 3 years ago

I think this replacement is something you want to do on build time. You delivering a javascript file with 224 svg icons when using – say – 5 in your frontend.

bloycey commented 3 years ago

@micha149 Thanks a heap for the code review! Will go through these suggestions soon.

bloycey commented 3 years ago

I think this replacement is something you want to do on build time. You delivering a javascript file with 224 svg icons when using – say – 5 in your frontend.

@micha149 You're right about the inefficiencies here. The primary motivation behind this PR is developer experience and code readability. It's up to the developer whether these improvements are worth the inclusion of an extra JS file to download.

iamgp commented 3 years ago

I think this replacement is something you want to do on build time. You delivering a javascript file with 224 svg icons when using – say – 5 in your frontend.

@micha149 You're right about the inefficiencies here. The primary motivation behind this PR is developer experience and code readability. It's up to the developer whether these improvements are worth the inclusion of an extra JS file to download.

I like it! I also am working in a project that doesn't have a build step, so a CDN-served version like this would be very handy.

adamwathan commented 3 years ago

Hey thanks so much for the contribution! I think this particular idea would be best handled as a separate community-maintained package, as I just can't responsibly commit to taking this on and maintaining it ourselves with the resources we have.

Hope that's understandable, and thanks again ❤️

tailwindlabs / heroicons