README-CN.md

Oh, Vue Icons!

English | 中文说明

oh-vue-icons 是一个能让你在 Vue 中轻松从多个流行图标库中引入 SVG 图标的组件。

 

特性

• 支持 Vue 2 和 3
• 支持 tree-shaking，因此你能够仅引入你需要的图标从而减小打包体积
• 支持来自 20 个流行的图标库的 30000+ 个图标

 

支持的图标库

目前支持以下 20 个图标库：

图标库	前缀	协议	图标数量
academicons	ai	SIL OFL 1.1	149
Bootstrap Icons	bi	MIT	1668
CoreUI Icons Free (Colorful)	co	CC BY 4.0 License	1575
Cryptocurrency Icons (Colorful)	ci	CC0 1.0 Universal	942
Font Awesome 5 Free	fa	CC BY 4.0	1610
Flat Color Icons (Colorful)	fc	MIT / Good Boy	329
Flag Icon (Colorful)	fi	MIT	530
gameicons	gi	CC BY 3.0	4052
Heroicons	hi	MIT	460
Ionicons	io	MIT	1332
Line Awesome	la	MIT / Good Boy	1544
Material Design icons	md	Apache 2.0	10537
Octicons	oi	MIT	259
Pokemon Icons (Colorful)	pi	CC BY 4.0	1453
PrimeIcons	pr	MIT	238
Pixelarticons	px	MIT	460
Remix Icon	ri	Apache 2.0	2271
Simple Icons	si	CC0 1.0 Universal	2233
VSCode Icons (Colorful)	vi	CC BY-SA 4.0	1125
Weather Icons	wi	SIL OFL 1.1	219

 

文档

在这里查找图标和查看文档。

 

安装

yarn add oh-vue-icons
# 或
npm install oh-vue-icons

使用 Vue 2 时，还需要安装 @vue/composition-api：

yarn add @vue/composition-api -D

如果用的是 Nuxt 2，则需要安装的是 @nuxtjs/composition-api：

yarn add @nuxtjs/composition-api -D

然后把 @nuxtjs/composition-api/module 加到你的 nuxt.config.js 文件的 buildModules 项中，更多细节见这里。

 

引入

全局引入

首先需要在 main.js 中引入 oh-vue-icons。你可以只引入你需要的图标从而减小打包体积。

Vue 3

// main.js
import { createApp } from "vue";
import App from "./App.vue";

import { OhVueIcon, addIcons } from "oh-vue-icons";
import { FaFlag, RiZhihuFill } from "oh-vue-icons/icons";

addIcons(FaFlag, RiZhihuFill);

const app = createApp(App);
app.component("v-icon", OhVueIcon);
app.mount("#app");

如果你并不在意打包体积，并希望引入某个图标库的所有图标，你可以：

// main.js
// 引入 Font Awesome
import * as FaIcons from 'oh-vue-icons/icons/fa'

const Fa = Object.values({ ...FaIcons })
OhVueIcon.add(...Fa);

Vue 2

// main.js
import Vue from "vue";
import App from "./App.vue";

import { OhVueIcon, addIcons } from "oh-vue-icons";
import { FaFlag, RiZhihuFill } from "oh-vue-icons/icons";

addIcons(FaFlag, RiZhihuFill);

Vue.component("v-icon", OhVueIcon);

new Vue({
  render: h => h(App)
}).$mount("#app");

 

局部引入

import OhVueIcon from "oh-vue-icons";

export default {
  components: {
    "v-icon": OhVueIcon
  }
};

 

用法

通过 name prop 来指定图标名，name prop 值需要使用短横线隔开式命名：

<template>
  <div>
    <v-icon name="fa-flag" />
    <v-icon name="ri-zhihu-fill" />
  </div>
</template>

对于 Font Awesome 5，来自 regular 包的图标的 name prop 值的前缀为 fa-regular- 而不是 fa-，如 fa-regular-flag。而 solid 和 brands 包的图标前缀均为 fa-，如 fa-beer 和 fa-github。

文档中有更多的用法。

 

Props

名称	描述	类型	接受值	默认值
scale	图标大小	number	/	1
animation	动画类型	string	wrench / ring / pulse / spin / spin-pulse / flash / float	/
speed	动画速度	string	slow / fast	/
hover	仅在被 hover 时启用动画	boolean	true / false	false
flip	翻转类型	string	vertical / horizontal / both	/
fill	图标的填充颜色	string	颜色名称或十六进制颜色代码	currentColor
label	图标的 lable	string	/	/
title	图标的 title	string	/	/
inverse	把图标变成白色	boolean	true / false	false

文档中有一些示例。

 

Nuxt

当使用 Nuxt.js 时，需要按照 Nuxt 文档中的方式，将 oh-vue-icons 注册为一个插件。

然后需要在 nuxt.config.js 的 build.transpile 项中添加 oh-vue-icons（具体解释见这里）：

export default {
  // ...
  build: {
    transpile: ['oh-vue-icons']
  }
}

为了仅在客户端（client-side）渲染该组件，需要把组件包裹在 <client-only> 标签里：

<template>
  <div>
    <client-only>
      <v-icon name="fa-flag" />
      <v-icon name="ri-zhihu-fill" />
    </client-only>
  </div>
</template>

 

Vite

使用 Vite 作为打包工具时，建议在预构建中排除 oh-vue-icons（具体讨论见 #20）：

// vite.config.js

export default {
  // ...
  optimizeDeps: {
    exclude: ["oh-vue-icons/icons"]
  }
}

当使用 Vite 的服务端渲染（SSR）功能时（例如 VuePress、Vite SSG 等），需要将 oh-vue-icons 加入 ssr.noExternal 项（具体解释见这里）：

// vite.config.js

export default {
  // ...
  ssr: {
    noExternal: ["oh-vue-icons"]
  }
}

 

贡献

欢迎贡献，这里是贡献指南。

 

致谢

• 本项目受到了 vue-awesome 和 react-icons 的启发并借鉴了它们的部分代码
• 文档网站由 Vitesse 驱动，部署在 Netlify 上

 

开源协议

本项目使用 MIT 开源协议。图标来自于其他项目，所以还需要参考这些项目的开源协议。