从零开始的 Vuepress2.X (四)
（四）使用阿里巴巴图标
目录
前言
其实vuepress-theme-reco@2.x虽然是通过 Xicons 来配置图标的
不过却几乎可以满足绝大部分场景。
而且Markdown也支持直接使用 Emoji 表情
但总是有小伙伴喜欢用自己的图标
封装图标组件
我们可以封装一个组件，集合 Element、iconfont、Xicons 的图标
修改 Element 图标
首先修改一下Element图标的引入方式
import { defineClientConfig } from '@vuepress/client'// 导入组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
const icons = ElementPlusIconsVue as any;
export default defineClientConfig ({
enhance({ app }){
// 引入element图标
// Object.keys(icons).forEach(key => {
// app.component(key, icons[key])
// })
for (const i in icons) {
app.component(`ele-${icons[i].name}`, icons[i]);
}
app.use(ElementPlus)
...
}
})
引入iconfont图标
在 head 中添加 script
// .vuepress/config.ts
export default {
head: [
['link', { rel: 'icon', href: 'https://toby607-1317049696.cos.ap-guangzhou.myqcloud.com/images/202303201032565.ico' }],
['script', { type: 'module', async: true, src: '//at.alicdn.com/t/c/font_3933848_spkan9npxzi.js' }],
],
}
封装icon组件
在 .vuepress/components 中插件 SvgIcon.vue
File not found效果
我们来看一下实际效果吧
---
title: test2
date: 2023/3/1
tags:
- css
categories:
- 测试图标
---
<div>
我是 Element 图标
<SvgIcon name="ele-Delete" color="green" :size="20"/>
</div>
<div>
我是 iconfont 图标
<SvgIcon name="T-xin1" color="red"/>
</div>
<div>
我是 Xicons 图标
<SvgIcon name="Home" :size="20"/>
</div>
