快速开始

本节将介绍如何在项目中使用 vusui-icon。

Unicode

<!--Unicode 引用方法-->
<template>
  <i class="vusuiIcon">&#xedbd;</i>
</template>

<script>
import '@vusui/icon/font/index.css';
</script>

Font Class

<!--class 样式引用方法-->
<template>
  <i class="vi-home"></i>
</template>

<script>
import '@vusui/icon/font/index.css';
</script>

Symbol

💡 使用 svg 图标时，建议封装成公共组件来调用。

<!--svg 引用方法-->
<template>
  <svg class="vusuiSvg" aria-hidden="true">
    <use xlink:href="#vi-home"></use>
  </svg>
</template>

<script>
import '@vusui/icon/svg';
import '@vusui/icon/svg/style.css';
</script>