# wen-icon

> making svg into vue component integrated with figma

Latest version **1.0.5** (published 2021-05-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install wen-icon
pnpm add wen-icon
yarn add wen-icon
bun add wen-icon
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-05-16 |
| First published | 2021-05-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 70 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | cywen |
| Maintainers | cgwen |
| Keywords | svg, vue, component, figma |

## Links

- npm: https://www.npmjs.com/package/wen-icon
- Repository: https://github.com/joinwen/wen-icon
- Homepage: https://github.com/joinwen/wen-icon#readme
- Issues: https://github.com/joinwen/wen-icon/issues
- npm.io page: https://npm.io/package/wen-icon

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.12
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.14.0
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^4.0.0-alpha.0
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.14.0
- [vue-svg-component-runtime](https://npm.io/package/vue-svg-component-runtime.md) ^1.0.1

## Recent versions

- 1.0.5 (latest) — 2021-05-16
- 1.0.4 — 2021-05-15
- 1.0.3 — 2021-05-15
- 1.0.2 — 2021-05-15
- 1.0.1 — 2021-05-15
- 1.0.0 — 2021-05-15

## README

## wen-icon

### preview

### install

```
npm install wen-icon --save 
```

### config

配置 vue-svg-icon-loader

```
1. webpack 配置
npm install vue-svg-icon-loader -save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        resourceQuery: /wen-icon/,
        use: "vue-svg-icon-loader"
      }
    ]
  }
}
  
2. vue-cli 配置
npm install vue-svg-icon-loader --save-dev

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.use("vue-svg-icon-loader")
    .resourceQuery(/wen-icon/)
    .loader("vue-svg-icon-loader");
  }
}
```

### usage

- #### 1. basic
```
// 1. 引入
import { WenIcon } from "wen-icon";

// 2. 局部注册组件
components: { WenIcon }

// 3. template 中使用
<template>
  <wen-icon name="annotation">
</template>
```

- #### 2. width(default 24px),height(default 24px)
```
<template>
  <wen-icon name="annotation" width="48px" height="48px" />
</template>
```

- #### 3. fill(default white)
```
<template>
  <wen-icon name="annotation" fill="red" />
</template>
```

- #### 4. stroke(default black)
```
<template>
  <wen-icon name="annotation" stroke="red" />
</template>
```

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