# vue-svgiconfont

> Use Iconfont Svg in Vue

Latest version **0.1.3** (published 2018-06-25) · 0 weekly downloads

## Install

```sh
npm install vue-svgiconfont
pnpm add vue-svgiconfont
yarn add vue-svgiconfont
bun add vue-svgiconfont
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-06-25 |
| First published | 2018-06-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 35 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | +v |
| Maintainers | chiaweilee |

## Links

- npm: https://www.npmjs.com/package/vue-svgiconfont
- Repository: https://github.com/chiaweilee/vue-svgiconfont
- Homepage: https://github.com/chiaweilee/vue-svgiconfont#readme
- Issues: https://github.com/chiaweilee/vue-svgiconfont/issues
- npm.io page: https://npm.io/package/vue-svgiconfont

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.16

## Recent versions

- 0.1.3 (latest) — 2018-06-25

## README

## Vue-SvgIconfont
---

### Install

```
npm install vue-svgiconfont
```

### Manage and download your Icons.

Iconfont http://iconfont.cn/

### Usage
```vuejs
import Vue from 'vue'

<!--import svg file you downloaded from your Iconfont project-->
import './assets/iconfont.svg'
<!--import css file for svg, or write css yourself-->
import 'vue-svgiconfont/svgiconfont.css'
import vueSvgIconfont from 'vue-svgiconfont'
Vue.use(vueSvgIconfont, {
  tagName: 'svg-iconfont', // default for <svg-iconfont />
  className: 'fafont',
  prefix: 'fa' // find prefix in your Iconfont project. Default: 'icon'
})
```

```vue
<svg-iconfont />
```

### Props

- spin

```vue
<svg-iconfont spin />
```

The 'spin' and others below use CSS to work, so you should import 'svgiconfont.css' first.
Or you can write it your self, like this:

```css
 svg.spin[data-v-svgiconfont] {
      animation: fa-spin 1s 0s infinite linear;
 }
 @keyframes fa-spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
```

- pulse
- flip-vertical
- flip-horizontal

---
_Source: https://npm.io/package/vue-svgiconfont · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._