$ cd /home/

Icons

Gungnir
2020-03-30
4 min

Gungnir uses Vue icon component oh-vue-icons (my another project lol) for icon support. oh-vue-icons is for including inline SVG icons from different popular icon packs easily.

See here for documentation and other details of oh-vue-icons.

Import Icons

oh-vue-icons supports tree-shaking, icons that are not imported will not be included in your site's bundle files. So you can only import the icons you need to reduce the bundle size.

Gungnir has already imported the following icons:

  • FaRegularUser:
  • FaRegularCalendar:
  • FaSun:
  • FaMoon:
  • FaMagic:
  • FaChevronLeft:
  • FaChevronRight:
  • FaChevronUp:
  • FaChevronDown:
  • FaListUl:
  • FaPencilAlt:
  • FaCircle:
  • FaGithubAlt:
  • FaLinkedinIn:
  • FaFacebookF:
  • FaTwitter:
  • FaEnvelope:
  • RiWeiboFill:
  • RiZhihuLine:
  • RiRssFill:
  • RiSearch2Line:
  • RiTimerLine:
  • HiTranslate:
  • BiLayoutSidebarInset:

To import other icons, you may need to search for icons' names here and globally import theme in your .vuepress/client.js file (create one if it dosen't exist):

// .vuepress/client.js

import { addIcons } from "oh-vue-icons";

// import the icons you need
import { OiGitCompare, RiBook2Fill } from "oh-vue-icons/icons";
addIcons(OiGitCompare, RiBook2Fill);

Or you can also locally import them in your custom components.

Use Icons

Then you can use these icons in Markdown or your custom components:

<v-icon name="oi-git-compare" />
<v-icon name="ri-book-2-fill" />

oh-vue-icons also supports many other features, like editting icon's color, size, animation, flip and so on. Here are some examples:

<v-icon name="oi-git-compare" scale="2" />
<v-icon name="oi-git-compare" flip="vertical" />
<v-icon name="oi-git-compare" fill="orange" />
<v-icon name="oi-git-compare" animation="flash" />

See documentation of oh-vue-icons for more features and examples.