Icon 图标

基础用法

Icon 支持如下类型：

svg
unicode
iconfont
symbol
img
component
iconifyOffline
iconifyOnline

提供传入 iconType 来设置图标类型。

vue

<script setup lang="ts">
import { TkIcon } from "vitepress-theme-teek";

const svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="39px" height="47px" viewBox="0 0 39 47" enable-background="new 0 0 39 47" xml:space="preserve">  <image id="image0" width="39" height="47" x="0" y="0"
    xlink:href="data:image/png;base64,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" />
</svg>
`;
</script>

<template>
  <div class="icons-container">
    <TkIcon icon="material-symbols:account-circle" icon-type="iconifyOnline" />
    <TkIcon :icon="svg" icon-type="svg" />

    <!-- 引入 iconfont 在线图标样式 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2989306_w303erbip9.css" />
    <TkIcon icon="icon-github" icon-type="iconfont" />

    <TkIcon icon="https://vp.teek.top/blog/bg2.webp" icon-type="img" imgAlt="Teek Img" />
  </div>
</template>

<style lang="scss" scoped>
.icons-container {
  display: flex;
  gap: 20px;
}
</style>

简写使用

Icon 支持特定的格式来自动识别图标类型，无需传入 iconType。

icon 为 img- 或 IMG- 开头，iconType 默认为 img
icon 为 <svg 开头，iconType 默认为 svg
icon 为 if- 或 IF- 开头，iconType 默认为 iconfont
icon 为 uni- 或 UNI- 开头，iconType 默认为 unicode
icon 为 sym- 或 SYM- 开头，iconType 默认为 symbol
icon 为含有 name 或者 setup，iconType 默认为 component
icon 为含有 body，iconType 默认为 iconifyOffline
icon 含有 :，iconType 默认为 iconifyOnline

vue

<script setup lang="ts">
import { TkIcon } from "vitepress-theme-teek";

const svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="39px" height="47px" viewBox="0 0 39 47" enable-background="new 0 0 39 47" xml:space="preserve">  <image id="image0" width="39" height="47" x="0" y="0"
    xlink:href="data:image/png;base64,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" />
</svg>
`;
</script>

<template>
  <div class="icons-container">
    <TkIcon icon="material-symbols:account-circle" />
    <TkIcon :icon="svg" />

    <link rel="stylesheet" href="//at.alicdn.com/t/font_2989306_w303erbip9.css" />
    <TkIcon icon="if-icon-github" />

    <TkIcon icon="img-https://vp.teek.top/blog/bg2.webp" imgAlt="Teek Img" />
  </div>
</template>

<style lang="scss" scoped>
.icons-container {
  display: flex;
  gap: 20px;
}
</style>

激活状态

Icon 支持鼠标激活状态，通过传入 hover 来激活，hover-color 来设置颜色，默认为 Teek 的主题色。

API

配置项

事件名	说明	类型	默认值
icon	图标	`string` / `Object` / `Comment` / `IconifyIcon`	—
iconType	图标类型	`IconType`	—
size	图标大小	`string` / `number`	inherit
color	图标颜色	`string`	inherit
hover	图标是否可悬停	`boolean`	false
hoverColor	图标悬停时的颜色	`string`	var(--tk-theme-color)
imgAlt	img 标签的原生 alt，仅当 `iconType` 为 `img` 生效	`string`	—
style	自定义图标样式	`Record<string, any>`	—

IconType 类型为 svg / unicode / iconfont / symbol / img / component / iconifyOffline / iconifyOnline。

插槽

插槽名	说明
default	自定义图标内容

Icon 图标 ​

基础用法 ​

简写使用 ​

激活状态 ​

API ​

配置项 ​

插槽 ​

Icon 图标

基础用法

简写使用

激活状态

API

配置项

插槽