# vct-icons

> [![npm](https://img.shields.io/npm/v/vct-icons?color=006AFF)](https://www.npmjs.com/package/vct-icons)

Latest version **0.3.2** (published 2023-01-09) · 0 weekly downloads

## Install

```sh
npm install vct-icons
pnpm add vct-icons
yarn add vct-icons
bun add vct-icons
```

## 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.3.2 |
| Published | 2023-01-09 |
| First published | 2022-12-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | lzy0730 |

## Links

- npm: https://www.npmjs.com/package/vct-icons
- npm.io page: https://npm.io/package/vct-icons

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3

## Recent versions

- 0.3.2 (latest) — 2023-01-09
- 0.3.1 — 2023-01-09
- 0.3.0 — 2023-01-09
- 0.2.7 — 2023-01-09
- 0.2.6 — 2023-01-09
- 0.2.5 — 2023-01-09
- 0.2.4 — 2022-12-13
- 0.2.3 — 2022-12-13
- 0.2.2 — 2022-12-13
- 0.2.1 — 2022-12-13
- 0.2.0 — 2022-12-13
- 0.1.4 — 2022-12-12
- 0.1.2 — 2022-12-12
- 0.1.1 — 2022-12-12
- 0.1.0 — 2022-12-12

## README

[![npm](https://img.shields.io/npm/v/vct-icons?color=006AFF)](https://www.npmjs.com/package/vct-icons)

简体中文

Vct Icons 是一套适配 Vue Common Template 的开源图标库。基于 Remix Icon 封装，额外支持本地 svg 图片，但需要安装 svg-sprite-loader 并指定目录。
图标以 24x24 网格为基准，分为“线性图标”和“面型图标”两种风格。所有的图标均可免费用于个人项目和商业项目，Enjoy it~

[![icon demo](http://cdn.remixicon.com/preview.svg)](https://remixicon.com)

前往 Remix Icon 官网查看整套图标库 [remixicon.com](https://remixicon.com).

## 使用说明

### 基本用法

直接在[remixicon.com](https://remixicon.com)点击您想要的图标, 在打开的图标窗口中复制图标名称作为组件 icon 属性值即可。

#### 安装引入

```
npm install vct-icons --save
```

```
import VctIcon from 'vct-icons'
import 'vct-icons/fonts/vct-icons.css'
Vue.use(VctIcon)
```

#### 使用

引入 Vct Icons 图标库后，就可以在 web 项目中使用了，只要在使用图标的时候将图标名称作为 icon 属性值就可以了。规则：icon="图标名称"

```html
<vct-icon icon="admin-line" />
```

#### 大小

size="图标大小"

```html
<div style="font-size: 24px;">
  <vct-icon icon="admin-line" size="fw" />
  <!-- fixed width -->
  <vct-icon icon="admin-line" size="xxs" />
  <!-- 0.5em -->
  <vct-icon icon="admin-line" size="xs" />
  <!-- 0.75em -->
  <vct-icon icon="admin-line" size="sm" />
  <!-- 0.875em -->
  <vct-icon icon="admin-line" size="1x" />
  <!-- 1em -->
  <vct-icon icon="admin-line" size="lg" />
  <!-- 1.3333em -->
  <vct-icon icon="admin-line" size="xl" />
  <!-- 1.5em -->
  <vct-icon icon="admin-line" size="2x" />
  <!-- 2em -->
  <vct-icon icon="admin-line" size="3x" />
  <!-- 3em -->
  ...
  <vct-icon icon="admin-line" size="10x" />
  <!-- 10em -->
</div>
```

> 您也可以在 [`remixicon.css`](https://github.com/Remix-Design/RemixIcon/blob/master/fonts/remixicon.css) 中查看到更多的尺寸定义相关信息。

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