Install open source Feather icons

Follow along as I document my work, life and projects.

• Setting up the Mac
• Starting a new SPA project
• Building a SPA layout using Tailwind
• Get started with git version control
• Install open source Feather icons
• How to add Vuex and Axios to your project
• Let’s setup TablePlus the database GUI
• How to add Laravel Auth to your Vuejs project
• How to import Marked Markdown into your Vuejs project

At some point you will need to use icons. Currently I recommend Feathers as an easy to use and highly versatile repository. It is an open source project so please consider supporting.

This should be a fast one. Let’s get started.

1. Install with npm

npm install feathers-icons --save 

2. Now locate the feather-cons file in the node_modules folder and copy the feather-sprite.svg file into your public folder

3. Copy the following CSS to your app.scss file

.feather {
   width: 24px;
   height: 24px;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   fill: none;
 }

4. Now use anyone of the 279 open source feather icons in your project using the following syntax as an example

<svg class="feather">
  <use xlink:href="feather-sprite.svg#activity"/>
</svg>

In a total of 4 steps you’ll be up and running with icons for your shiny new project. For other implementation methods then find the full documentation here — https://github.com/feathericons/feather#feather

That’s it for today. Let me know if you have any tips or tricks to share with others.

Until next time!

Ben