Appearance

图标

介绍

vuepress-theme-reco@2.x 是通过 Xiconsopen in new window 来配置图标的,Xicons 只集成了 carbon 1 种图标,几乎可以满足绝大部分场景。

使用

主题将其封装封装成了 Xicons 全局组件,允许在用户 markdown 文件中直接使用,主题中的一些允许配置图标的地方也是使用了 Xicons 组件,保证一样的使用体验。

在 markdown 中使用

如果想要在 markdown 中输出一个星星图标 ,你就可以在 markdown 中这样比编辑代码:

<xicons icon="Star" />

Props

参数说明类型可选值默认值
icon图标string比如 Star,为 Xiconsopen in new windowcarbon 下具体某个图标的的名字-
color图标和文本的颜色string-inherit
iconPosition图标的位置,同时设置了 icon 和 text 时才有意义stringtop/bottom/left/rightleft
iconSize图标的大小string-18
text文本的内容string--
textSize文本的大小string-14
link跳转链接string-javascript:void(0)
target跳转方式string_self/_blank/_parent/_top_self

Slots

name说明
default指定 props.text 位置的内容,用于表达更加复杂的内容
icon通过外部图标来替换

在配置中使用

主题中的一些允许配置图标的地方,比如 首页,与上面 Props.icon 保持一致。