Skip to content

Vue.js 使用 Vue-Awesome

源码

在 Github 上 Vue-Awesome

安装

bash
npm install vue-awesome

DEMO

DEMO

示例代码

基础

html
<icon name="flag"></icon>

放大/缩小 Scale

html
<icon name="language" scale="3"></icon>

旋转 Spin

html
<icon name="refresh" spin></icon>

反转 Flip

html
<icon name="signal" flip="horizontal"></icon>

标签

html
<icon name="code" label="Source Code"></icon>

叠加

html
<icon label="No Photos">
  <icon name="camera"></icon>
  <icon name="ban" scale="2" class="alert"></icon>
</icon>

自定义 Icon

SVG

js
// ES Modules with vue-loader
import Icon from 'vue-awesome/components/Icon.vue'

Icon.register({
  'html5-c': {
    width: 512,
    height: 512,
    raw: '<path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/><path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/><path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/><path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>'
  }
})

导入到项目

js
import Vue from 'vue'

/* Pick one way between the 2 following ways */

// only import the icons you use to reduce bundle size
import 'vue-awesome/icons/flag'

// or import all icons if you don't care about bundle size
import 'vue-awesome/icons'

/* Register component with one of 2 methods */

import Icon from 'vue-awesome/components/Icon'

// globally (in your main .js file)
Vue.component('icon', Icon)

// or locally (in your component file)
export default {
  components: {
    Icon
  }
}

所有 Icon 一览

http://fontawesome.io/icons/

参考

  1. vuejs-折腾系列(一)vue-fontawesome 使用

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.