@twistify/react-icons
v1.0.0-beta.1
Published
React SVG icon packs powered by Iconify
Readme
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
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
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
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.
| 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.
// 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 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!