Skip to content

Latest commit

 

History

History
110 lines (90 loc) · 3.47 KB

icons.md

File metadata and controls

110 lines (90 loc) · 3.47 KB

How to add icons?

Font Awesome

Use Font Awesome icons with the @nuxtjs/fontawesome module (Uses vue-fontawesome under the hood).

Example:

<font-awesome-icon :icon="['fas', 'wifi']" />

Don't forget to add the new icon to nuxt.config.js:

 fontawesome: {
   icons: {
     solid: [
+      'faWifi'
     ],
   }
 }

See Font Awesome Docs.

Note: You may need to restart Nuxt to see new icons.

Warning: Use only free icons.

Custom SVG Icon

Create a component for your SVG icon in ~/components/icons. Use .svg-icon-inline class.

~/components/icons/IconMylogo.vue:

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    stroke="currentColor"
    class="svg-icon-inline"
  >
    <path d="M..." />
  </svg>
</template>

Use it:

<IconMylogo />

Style with Tailwind:

<IconMylogo class="h-4 text-white fill-current stroke-current stroke-1" />

See Tailwind: Working with SVG Icons.

Tip: Make sure your SVG file has only fill="currentColor" and/or stroke="currentColor" attributes. never specific color.

Use font size

It's nice when the icon size increase and decrease according to the font size. To do that, use em units to set the initial icon size:

<IconMylogo style="height: 0.9em; width: 1.25em;" />

Or set the size in the component:

~/components/icons/IconMylogo.vue:

 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
     stroke="currentColor"
     class="svg-icon-inline"
+    style="height: 1.2em; width: 1.25em;"
   >
     <path d="M..." />
   </svg>
 </template>

Get Icons

You can find SVG icons on the internet or create one by yourself.

Resources:

Search all in one place: