Feather Icons: Easy way to get SVG icons in Vue components

So I just created a new Laravel project and quickly need a couple icons in the UI. I usually use Steve Schoger's Heroicons UI, but I needed a few icons that Heroicons didn't have. My options were:

A) Find a new, good-looking, SVG icon set B) Go back to font-awesome 👴🏻 C) Cherry pick individual icons as I need them (icon-finder)

"A" was definitely the most appealing to me, so I did a bit of searching and quickly landed on Feather Icons.

I liked it for its small size, npm importability, and tag-based search feature on the website.

Note: Streamline icons is another good one that I've used before, but it's WAY more robust than I generally need. For bigger projects though, it's 👌.

Installing Feather Icons

Typically I manually add SVGs to something like a resources/svg directory, but with Feather Icons I can install them from NPM and deal with them as objects in my javascript. I thought that was pretty cool.

npm i feather-icons --save-dev

Now I can access them programmatically like so:

import feather from 'feather-icons'
...
return feather.icons.clock.toSvg()

But wait, how do I render that SVG string in a Vue template?

Well, I could <span v-html="iconSvg"></span>, but then I'd have that unnecessary <span> tag wrapping the SVG.

Wait a second, didn't I write a whole blog post about this problem already?

Well, yeah but that was when I was working with .svg files.

Well isn't it the same principle?

Well yeah, but I'd have to rewrite the component to support...hmm...I wonder if there's something out there already to import Feather Icons into Vue...

Eureka!

Well, I'll be darned. There is a package that cleverly handles importing Feather Icons into vue components. Can you guess what it's called?

Introducing: Vue Feather Icons

Big thanks to EGOIST for this handy project. You can support EGOIST here: https://www.patreon.com/egoist

Installation

npm i vue-feather-icons --save-dev (Note: this replaces the need for importing feather-icons like we did earlier.)

Usage

This package is cool because you can import them directly as their own functional Vue components:

<template>
  <div>What <ClockIcon> is it?</div>
</template>

<script>
import { ClockIcon } from 'vue-feather-icons'

export default {
  components: { ClockIcon },
  ...
}
</script>

What about sizing and styling?

To color the component, you can just add CSS classes for text color like so:

<template>
  <div>What <ClockIcon class="text-orange-lighter"> is it?</div>
</template>

However, sizing isn't as pretty. I had to pull out my .svg-icon CSS class from the previous blog post to get it working right. If you add this to your global stylesheet, all your feather icons will be sized properly:

svg.feather {
    height: 1em;
    margin-top: -4px;
    pointer-events: none;
    vertical-align: middle;
    width: 1em;
}

This class makes it so that your SVGs will inherit the font-size of it's parent, so for example: <h1 class="text-5xl">Foo <ClockIcon class="svg-icon"/></h1> the <ClockIcon/> will be the same size as the text adjacent to it (Foo).

It's so simple!

As I said, this might not be THE solution to every project, but this is definitely going to be what I reach for on most side projects. It has everything I wanted:

• Super simple to set up (npm install 1 package)
• Tag-based icon searching (for those times you can't remember if it's dollar, money, or currency)
• Nice Vue usage (you get dedicated Vue component for each icon)
• Easily stylable

I hope this helps you with your icon needs as it did mine.

✌️

My Newsletter

I send out an email every so often about cool stuff I'm working on or launching. If you dig, go ahead and sign up!