# moicon

> A modern solution for using SVG icons.

Latest version **0.2.2** (published 2022-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install moicon
pnpm add moicon
yarn add moicon
bun add moicon
```

Provides the command `moicon`.

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2022-03-23 |
| First published | 2021-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | dumplings0415@gmail.com |
| Maintainers | dumplings |
| Keywords | svg, icon, icon-svg, svg-icon, moicon, modern |

## Links

- npm: https://www.npmjs.com/package/moicon
- Repository: https://github.com/dumplings/moicon
- Homepage: https://github.com/dumplings/moicon#readme
- Issues: https://github.com/dumplings/moicon/issues
- npm.io page: https://npm.io/package/moicon

## Dependencies (6)

- [md5](https://npm.io/package/md5.md) ^2.3.0
- [svgo](https://npm.io/package/svgo.md) ^2.8.0
- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [yargs](https://npm.io/package/yargs.md) ^17.3.1
- [xml2js](https://npm.io/package/xml2js.md) ^0.4.23
- [html-minifier](https://npm.io/package/html-minifier.md) ^4.0.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 0.2.2 (latest) — 2022-03-23
- 0.2.1 — 2022-03-23
- 0.2.0 — 2022-03-23
- 0.0.1 — 2021-12-22

## README

# MOICON · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dumplings/moicon/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/moicon.svg?style=flat)](https://www.npmjs.com/package/moicon)

A modern solution for using SVG icons.

## Features

* Support CLI to generate inline script file.
* Support for colorful SVG icons.
* Vite plugin.

## Installation

```shell
$ npm install moicon
```

## Usage

### Colorful Config

If you want SVG icons to be colored and not be controlled by CSS, you can add `.c` to the suffix of the SVG file name,
like `heart.c.svg`.

### Command Line

Inline script file can be generated from the command line using `moicon`.

```shell
$ moicon input output
[MOICON Info] Finished:  /output/file/path/moicon.js
```

Type `moicon --help` for details:

```shell
$ moicon -h

moicon <input> <output> [options]

Commands to compile SVG files

Positionals:
  input   Directory of SVG files                                        [string]
  output  Output directory of js builder                                [string]

Options:
  -n, --name     Output builder name                [string] [default: "moicon"]
  -p, --prefix   The prefix of all icon class name      [string] [default: "mo"]
      --hash     Disable the hash                     [boolean] [default: false]
  -h, --help     Show help                                             [boolean]
  -v, --version  Show version number                                   [boolean]
```

### Vite Plugin

```javascript
// vite.config.js
import { vitePlugin } from 'moicon'

export default {
  plugins: [
    vue(),
    vitePlugin(svgFilesPath, svgClassPrefix),
  ]
}
```

#### Options

* `svgFilesPath` - Directory of SVG files, required.
* `svgClassPrefix` - The class prefix of svg tags, default is `mo`.

#### Examples

```vue
// create a `MoIcon.vue` file by yourself.
// MoIcon.vue
<template>
  <svg class="mo-icon">
    <use :href="`#mo-${name}`" />
  </svg>
</template>
<script>
export default {
  name: 'MoIcon',
  props: {
    name: {type:String, default: null, required: true}
  }
}
</script>

// App.vue
<mo-icon name="add" />
```

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