🦢 vue-feather-icon-set

Optimized Feather icon set for Vue using SVG references

:rocket: Install

 npm i vue-feather-icon-set

👩‍🏫 Usage

1. Put the IconLayer at the top of your app.
   The IconLayer needs to be top-level, above any icon usage. It's okay to put it in the app too as long as it's before any icons are used.

   <template>
     <icon-layer>
       <app />
     </icon-layer>
   </template>
   
   <script>
   import IconLayer from 'vue-feather-icon-set';
   import App from './app';
   
   export default {
     components: {
       IconLayer,
       App,
     }
   };
   </script>
   

2. Import the icon and use it!

   <template>
     <div>
       <alert-triangle-icon />
     </div>
   </template>
   
   <script>
   // direct import
   import AlertTriangleIcon from 'vue-feather-icon-set/icons/alert-triangle';
   
   // or, if you have tree-shaking
   import { AlertTriangleIcon } from 'vue-feather-icon-set';
   
   export default {
     components: {
       AlertTriangleIcon
     }
   };
   </script>
   

:raising_hand: FAQ

How is this optimized?

It's optimized using vue-svg-icon-set by leveraging how SVGs can be referenced and reused like variables with the <use> element. This icon-set leverages this feature to define referencable SVGs so that repeated usage of an icon isn't duplicated in the DOM.

Demo on JSFiddle

 <!-- Defined SVGs -->
<svg style="display: none">
  <defs>
    <svg id="plus">
      <path d="M8 2V14M2 8H14" stroke="black" stroke-width="2" />
    </svg>

    <svg id="circle">
      <circle cx="8" cy="8" r="8" fill="black" />
    </svg>
  </defs>
</svg>


<!-- Use "plus" icon -->
<svg class="icon" width="16" height="16">
  <use href="#plus" />
</svg>

<!-- Use "circle" icon -->
<svg class="icon" width="16" height="16">
  <use href="#circle" />
</svg>

Does this work with SSR?

Yes! However, the SVG will not be inlined in the server-rendered document. It's actually a technical limitation because each icon usages hoists up the SVG rendering to happen in the parent IconLayer, and SSR only renders once. This could work to an advantage as it keeps the server-rendered doc from including SVGs that may be large or repeated. Here's a working demo.