Skip to content

vusui/vusui-icon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vusui-icon 图标库

一套集成了 500+ 个常用图标的字体图标库。

使用文档】|【在线预览

使用包管理器

# 选择一个你喜欢的包管理器

# yarn
$ yarn add @vusui/icon

# npm
$ npm install @vusui/icon --save

# pnpm
$ pnpm install @vusui/icon

全局使用

// main.ts
import { createApp } from "vue";

// 引入图标库
import "@vusui/icon/font/index.css";

// 或者引入svg格式图标库
import "@vusui/icon/svg";
import "@vusui/icon/svg/style.css";

const app = createApp({});
app.mount("#app");

浏览器直接引入

直接通过浏览器的 HTML 标签导入 vusui-icon,然后就可以使用 Vusui-icon 图标库了。

根据不同的 CDN 提供商有不同的引入方式, 我们在这里以 unpkgjsDelivr 举例。

unpkg

<head>
  <!-- 引入图标库 -->
  <link rel="stylesheet" href="//unpkg.com/@vusui/icon/font/index.css" />
  <!-- 或者使用svg格式的图标库 -->
  <link rel="stylesheet" href="//unpkg.com/@vusui/icon/svg/style.css" />
  <script src="//unpkg.com/@vusui/icon/svg"></script>
</head>

jsDelivr

<head>
  <!-- 引入图标库 -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/@vusui/icon/font/index.css"
  />
  <!-- 或者使用svg格式的图标库 -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/@vusui/icon/svg/style.css"
  />
  <script src="//cdn.jsdelivr.net/npm/@vusui/icon/svg"></script>
</head>

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>