1 | # 🦢 vue-feather-icon-set <a href="https://npm.im/vue-feather-icon-set"><img src="https://badgen.net/npm/v/vue-feather-icon-set"></a> <a href="https://npm.im/vue-feather-icon-set"><img src="https://badgen.net/npm/dm/vue-feather-icon-set"></a> <a href="https://packagephobia.now.sh/result?p=vue-feather-icon-set"><img src="https://packagephobia.now.sh/badge?p=vue-feather-icon-set"></a> <a href="https://bundlephobia.com/result?p=vue-feather-icon-set"><img src="https://badgen.net/bundlephobia/minzip/vue-feather-icon-set"></a>
|
2 |
|
3 | Optimized [Feather](https://feathericons.com) icon set for Vue using SVG references
|
4 |
|
5 |
|
6 | ## :rocket: Install
|
7 | ```sh
|
8 | npm i vue-feather-icon-set
|
9 | ```
|
10 |
|
11 | ## 👩🏫 Usage
|
12 | 1. **Put the _IconLayer_ at the top of your app.**
|
13 | 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.
|
14 |
|
15 | ```vue
|
16 | <template>
|
17 | <icon-layer>
|
18 | <app />
|
19 | </icon-layer>
|
20 | </template>
|
21 |
|
22 | <script>
|
23 | import IconLayer from 'vue-feather-icon-set';
|
24 | import App from './app';
|
25 |
|
26 | export default {
|
27 | components: {
|
28 | IconLayer,
|
29 | App,
|
30 | }
|
31 | };
|
32 | </script>
|
33 | ```
|
34 | 2. **Import the icon and use it!**
|
35 |
|
36 | ```vue
|
37 | <template>
|
38 | <div>
|
39 | <alert-triangle-icon />
|
40 | </div>
|
41 | </template>
|
42 |
|
43 | <script>
|
44 | // direct import
|
45 | import AlertTriangleIcon from 'vue-feather-icon-set/icons/alert-triangle';
|
46 |
|
47 | // or, if you have tree-shaking
|
48 | import { AlertTriangleIcon } from 'vue-feather-icon-set';
|
49 |
|
50 | export default {
|
51 | components: {
|
52 | AlertTriangleIcon
|
53 | }
|
54 | };
|
55 | </script>
|
56 | ```
|
57 |
|
58 | ## :raising_hand: FAQ
|
59 |
|
60 | ### How is this optimized?
|
61 | It's optimized using [vue-svg-icon-set](https://www.npmjs.com/package/vue-svg-icon-set) by leveraging how SVGs can be referenced and reused like variables with the [`<use>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). This icon-set leverages this feature to define referencable SVGs so that repeated usage of an icon isn't duplicated in the DOM.
|
62 |
|
63 | Demo on [JSFiddle](https://jsfiddle.net/hirokiosame/94vbm5pr/)
|
64 |
|
65 | ```html
|
66 | <!-- Defined SVGs -->
|
67 | <svg style="display: none">
|
68 | <defs>
|
69 | <svg id="plus">
|
70 | <path d="M8 2V14M2 8H14" stroke="black" stroke-width="2" />
|
71 | </svg>
|
72 |
|
73 | <svg id="circle">
|
74 | <circle cx="8" cy="8" r="8" fill="black" />
|
75 | </svg>
|
76 | </defs>
|
77 | </svg>
|
78 |
|
79 |
|
80 | <!-- Use "plus" icon -->
|
81 | <svg class="icon" width="16" height="16">
|
82 | <use href="#plus" />
|
83 | </svg>
|
84 |
|
85 | <!-- Use "circle" icon -->
|
86 | <svg class="icon" width="16" height="16">
|
87 | <use href="#circle" />
|
88 | </svg>
|
89 | ```
|
90 |
|
91 | ### Does this work with SSR?
|
92 | 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](https://github.com/privatenumber/vue-svg-icon-set-ssr-demo).
|
93 |
|