@twist-space/vue3-icons v1.0.0-alpha.3

twist-icons

English | 简体中文

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

npm i @twist-space/react-icons

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

npm i @twist-space/vue3-icons

<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

npm i @twist-space/vue2-icons

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

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 '@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.

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 @twist-space/twist-icons-plugins -D

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 and xicons. The project Icons source from iconify, I learned a lot from it, thanks these project maintainers!

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