# @twist-space/vue2-icons

> Vue2 SVG icon packs powered by Iconify

Latest version **1.0.0-alpha.3** (published 2024-09-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @twist-space/vue2-icons
pnpm add @twist-space/vue2-icons
yarn add @twist-space/vue2-icons
bun add @twist-space/vue2-icons
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.3 |
| Published | 2024-09-19 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 86.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | razzh |
| Maintainers | razzh |

## Links

- npm: https://www.npmjs.com/package/@twist-space/vue2-icons
- Repository: https://github.com/twist-space/twist-icons
- Homepage: https://github.com/twist-space/twist-icons#readme
- Issues: https://github.com/twist-space/twist-icons/issues
- npm.io page: https://npm.io/package/@twist-space/vue2-icons

## Recent versions

- 1.0.0-alpha.3 (latest) — 2024-09-19
- 1.0.0-alpha.2 — 2024-09-07
- 1.0.0-alpha.1 — 2024-09-07
- 0.3.2 — 2024-09-03
- 0.3.1 — 2024-08-31
- 0.3.0 — 2024-07-03
- 0.3.0-alpha.3 — 2024-06-03
- 0.3.0-alpha.2 — 2024-06-01
- 0.2.17 — 2024-04-27
- 0.2.16 — 2024-03-28
- 0.2.15 — 2024-03-03
- 0.2.14 — 2024-02-28
- 0.2.13 — 2024-02-28
- 0.2.12 — 2024-02-25
- 0.2.11 — 2024-01-27
- … 8 more at https://npm.io/package/@twist-space/vue2-icons/versions

## README

# [twist-icons](https://twist-icons-docs.vercel.app/)

English | [简体中文](README.zh.md)

## Migrating to @twistify
I'm transitioning icon libraries from the `@twist-space` namespace to `@twistify` for improved ease of use and efficiency.  

### Why the Change?

The primary reason for this migration is to simplify the typing and usage experience. The `@twistify` namespace eliminates the hyphen **(-)** present in @twist-space, making it quicker and more convenient to input, especially during frequent development tasks. This small change helps streamline workflows, reducing the potential for typing errors and saving time.

### What’s Changing?

- Old Packages:
  - @twist-space/react-icons
  - @twist-space/vue3-icons
  - @twist-space/vue2-icons
  - @twist-space/twist-icons-plugins
- New Packages:
  - @twistify/react-icons
  - @twistify/vue3-icons
  - @twistify/vue2-icons
  - @twistify/icons-plugins

> The version is `@twist-space` packages last version, It is recommended to migrate to the new `@twistify` packages as soon as possible.

## Usage

### For React
[Live Demo](https://stackblitz.com/edit/vitejs-vite-ewd62r?file=src%2FApp.tsx)

```bash
npm i @twist-space/react-icons
```


```jsx
import { IconProvider } from '@twist-space/react-icons'
import { AiThunderboltFilled } from '@twist-space/react-icons/ai'
import { TiModeDark } from '@twist-space/react-icons/ti'

export default function App() {
  return (
    <IconProvider value={{ size: 60 }}>
      <AiThunderboltFilled color="#906efe" />
      <TiModeDark size={30} />
    </IconProvider>
  )
}
```

### For Vue3
[Live Demo](https://stackblitz.com/edit/vitejs-vite-zdrkec?file=src%2FApp.vue)

```bash
npm i @twist-space/vue3-icons
```


```vue
<script setup lang="ts">
import { IconProvider } from '@twist-space/vue3-icons'
import { AiThunderboltFilled } from '@twist-space/vue3-icons/ai'
import { TiModeDark } from '@twist-space/vue3-icons/ti'
</script>

<template>
  <IconProvider :size="60">
    <AiThunderboltFilled color="#906efe" />
    <TiModeDark :size="30" />
  </IconProvider>
</template>
```

### For Vue2
[Live Demo](https://stackblitz.com/edit/vite-vue2-wjkj4-rkkun1?file=src%2FApp.vue)

```bash
npm i @twist-space/vue2-icons
```

```vue
<template>
  <IconProvider :size="60">
    <AiThunderboltFilled color="#906efe" />
    <TiModeDark :size="30" />
  </IconProvider>
</template>

<script>
import { IconProvider } from '@twist-space/vue2-icons'
import { AiThunderboltFilled } from '@twist-space/vue2-icons/ai'
import { TiModeDark } from '@twist-space/vue2-icons/ti'
export default {
  components: {
    IconProvider,
    AiThunderboltFilled,
    TiModeDark,
  }
}
</script>
```

### Icon API

An universal icon component is provided for customizing color & size of the inner SVG icon.

| prop  | type               | default | description            |
| ----- | ------------------ | ------- | ---------------------- |
| size  | `number`           | -       | Size of the icon       |
| color | `string`           | -       | Color of the icon      |
| style | `CSSProperties`    | -       | Style of the icon      |
| class | `string`           | -       | Class of the icon      |
| title | `string`           | -       | SVG title of the icon  |
| spin  | `string`           | false   | Spin animation of the icon |
| rotate| `string`           | -       | Rotate style of the icon |

if you want use spin animation, you can import `mountedTwistIconsStyles` function call it in main files, it can mounted `animation css` style tag to head.

```tsx
// main file
import { mountedTwistIconsStyles } from '@twist-space/xxx-icons'

mountedTwistIconsStyles()
```

### IconProvider API

IconProvider will affect all the descendant Icons' default prop value, but the priority less than icon component user props.

| prop  | type               | default | description            |
| ----- | ------------------ | ------- | ---------------------- |
| size  | `number`           | -       | Size of the icon       |
| color | `string`           | -       | Color of the icon      |
| style | `CSSProperties`    | -       | Style of the icon      |
| class | `string`           | -       | Class of the icon      |
| attrs | `SVGAttributes`    | -       | SVGAttributes of the icon |

### Auto Import
If your project use Vue3/2, you can use the [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) plugin to automatically import components without using import icon component in the project.

```bash
npm i unplugin-vue-components @twist-space/twist-icons-plugins -D
```

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { TwistIconsVueResolver } from '@twist-space/twist-icons-plugins'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        TwistIconsVueResolver({
          version: 'vue3' // or vue2
        })
      ]
    })
  ]
})
```

> Note: The above content using unplugin plugins is also applicable to Webpack, you only need to switch the path of the plugin introduction.

### Credits

This project inspired by [react-icons](https://github.com/react-icons/react-icons) and [xicons](https://github.com/07akioni/xicons). The project Icons source from [iconify](https://iconify.design/), I learned a lot from it, thanks these project maintainers!
- [iconify](https://github.com/iconify/iconify)
- [ant-design-icons](https://github.com/ant-design/ant-design-icons)
- [react-icons](https://github.com/react-icons/react-icons)
- [xicons](https://github.com/07akioni/xicons)

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