TwistIcons

English | 简体中文

package	version
@twistify/react-icons
@twistify/vue3-icons
@twistify/vue2-icons
@twistify/icons-plugin

Twist-Icons is a set of high-quality SVG icon libraries. It collection popular Icons provide React、Vue3 and Vue2 Icons component, you can easy use them with ES6 import.

Usage

For React

npm i @twistify/react-icons --save

import { IconProvider } from '@twistify/react-icons'
import { AiThunderboltFilled } from '@twistify/react-icons/ai'
import { TiModeDark } from '@twistify/react-icons/ti'
 
export default function App() {
  return (
    <IconProvider value={{ size: 60 }}>
      <AiThunderboltFilled color="#906efe" />
      <TiModeDark size={30} />
    </IconProvider>
  )
}

For Vue3

npm i @twistify/vue3-icons --save

<script setup lang="ts">
import { IconProvider } from '@twistify/vue3-icons'
import { AiThunderboltFilled } from '@twistify/vue3-icons/ai'
import { TiModeDark } from '@twistify/vue3-icons/ti'
</script>
 
<template>
  <IconProvider :size="60">
    <AiThunderboltFilled color="#906efe" />
    <TiModeDark :size="30" />
  </IconProvider>
</template>

For Vue2

npm i @twistify/vue2-icons --save

<template>
  <IconProvider :size="60">
    <AiThunderboltFilled color="#906efe" />
    <TiModeDark :size="30" />
  </IconProvider>
</template>
 
<script>
import { IconProvider } from '@twistify/vue2-icons'
import { AiThunderboltFilled } from '@twistify/vue2-icons/ai'
import { TiModeDark } from '@twistify/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

IconProvider API

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

React IconProvider API

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

Vue IconProvider API

prop	type	default	description
size	`number`	-	Size of the icon
color	`string`	-	Color of the icon

Auto Import

If your project use Vue3 or Vue2, you can use the unplugin-vue-components plugin to automatically import components without using import icon component in the project.

npm i unplugin-vue-components @twistify/icons-plugin -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { TwistIconsVueResolver } from '@twistify/icons-plugin'
 
// 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.

Migrate to @twistify

To improved ease of use and efficiency, the @twist-space namespace migrate to @twistify.

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-plugin

Credits

This project inspired by react-icons、xicons、ant-design-icons. The project Icons source from iconify, I learned a lot from it.