主题内置了 Vue 图标组件 oh-vue-icons（我写的 hhh）作为图标支持。oh-vue-icons 集成了多个常用图标库，能让你轻松从不同的图标库引入 SVG 图标。

在这里查看 oh-vue-icons 的文档和更多信息。

引入图标

oh-vue-icons 支持 tree-shaking，没有引入的图标不会出现在打包文件中。因此你可以只引入你想要使用的图标，从而减小打包体积。

主题默认引入了以下图标：

• FaRegularUser：
• FaRegularCalendar：
• RiTimerLine：
• FaSun：
• FaMoon：
• FaMagic：
• FaChevronLeft：
• FaChevronRight：
• FaChevronUp：
• FaChevronDown：
• FaListUl：
• BiLayoutSidebarInset：
• FaPencilAlt：
• FaCircle：
• FaRss：
• FaGithubAlt：
• FaLinkedinIn：
• FaFacebookF：
• FaTwitter：
• RiZhihuLine：
• FaWeibo：

如果想要引入别的图标，需要在 oh-vue-icons 的网站上搜索图标的名称，然后在你的项目的 .vuepress/enhanceApp.js 文件（如果没有的话就新建一个）中全局引入图标：

// 引入 OhVueIcon 组件
import OhVueIcon from "oh-vue-icons";

// 引入想要使用的图标
import { OiGitCompare, RiBook2Fill } from "oh-vue-icons/icons";
OhVueIcon.add(OiGitCompare, RiBook2Fill);

当然你也可以在你的自定义组件中局部引入。

使用图标

然后你就可以在 Markdown 或自定义组件中使用引入的图标了：

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

oh-vue-icons 还支持定制图标的颜色、大小、翻转、动画等，这是一些例子：

<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" />

更多的功能和示例请参考 oh-vue-icons 的文档。