1.如何在vuepress-reco中自定义小图标
介绍
原来 reco 主题的图标只集成了Carbon1 种图标，因为定制能力受限，2.0.0-rc.23 版本之后，reco 主题不再内置图标，而是允许用户定制任何自己想要的图标。
注册图标组件
在 .vuepress/components 下注册图标组件，比如新增一个 IconHome.vue：
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 32 32"
>
<path
d="M16.612 2.214a1.01 1.01 0 0 0-1.242 0L1 13.419l1.243 1.572L4 13.621V26a2.004 2.004 0 0 0 2 2h20a2.004 2.004 0 0 0 2-2V13.63L29.757 15L31 13.428zM18 26h-4v-8h4zm2 0v-8a2.002 2.002 0 0 0-2-2h-4a2.002 2.002 0 0 0-2 2v8H6V12.062l10-7.79l10 7.8V26z"
fill="currentColor"
></path>
</svg>
</template>
使用图标组件
import { defineUserConfig } from "vuepress";
import recoTheme from "vuepress-theme-reco";
import { viteBundler } from "@vuepress/bundler-vite";
export default defineUserConfig({
bundler: viteBundler(),
theme: recoTheme({
navbar: { text: "首页", link: "/", icon: "IconHome" },
}),
});
<Xicons icon="IconHome" />
高级
如果想要在自定义组件或 markdown 中直接使用 svg 图标：
<Xicons :text="copyRight">
<template #icon>
<svg
class="xicon-icon"
style="width: 18px; height: 18px; font-size: 18px; color: inherit;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="9"></circle>
<path
d="M14 9.75a3.016 3.016 0 0 0-4.163.173a2.993 2.993 0 0 0 0 4.154A3.016 3.016 0 0 0 14 14.25"
></path>
</g>
</svg>
</template>
</Xicons>
更新版本
如果发现 vuepress-reco 版本较低，可以使用 npm update 升级到最新版本。
- 查看可更新的包
npm outdated
- 更新所有包
npm update
- 更新特定包
npm install <package-name>@latest --save
- 指定版本更新
npm install <package-name>@<version> --save