twist-icons

English | 简体中文

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

Usage

For React

Live Demo

npm i @twistify/react-icons

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

Live Demo

npm i @twistify/vue3-icons

<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

Live Demo

npm i @twistify/vue2-icons

<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 | boolean | 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.

// main file
import { mountedTwistIconsStyles } from '@twistify/xxx-icons'

mountedTwistIconsStyles()

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/2, 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.

Migrating 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-plugin
• 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.

• iconify
• ant-design-icons
• react-icons
• xicons