迁移指南

以下 css class 均使用 unocss/tailwindcss 作为示例

注意

1. @vrx-arco/icons-xx 的设计理念与iconify类似,只做纯粹的 svg 封装组件，内部没有任何业务逻辑。

2. 基于以上理念, @arco-design/web-xx 中的所有属性，均未在@vrx-arco/icons-xx 中实现。

3. 如想要这些功能，可以参考项目下 /build/{vue,react}.ts 文件，使用 @vrx-arco/iconify-json ,结合 iconify 的工具集，进行您自己的封装

@arco-design/web-vue

<script setup lang="ts">
  import { IconAlignCenter } from '@arco-design/web-vue/es/icon'
  import { IconAlignCenter } from '@vrx-arco/icons-vue'
</script>
<template>
   <IconAlignCenter :strokeWidth="4" :strokeLinecap="butt" :strokeLinejoin="miter" :rotate="90" spin :size="30" />
   <IconAlignCenter class="text-30px rotate-90 animate-spin" />
</template>

@arco-design/web-react

import { IconAlignCenter } from '@arco-design/web-react/es/icon'
import { IconAlignCenter } from '@vrx-arco/icons-vue'
export const App = () =>{
  return (
    <div>
      <IconAlignCenter spin />
      <IconAlignCenter className="animate-spin" />
    </div>
  )
}

图标配置

提示

由于 iconify 限制，生成的 svg 与 @arco-design/web-{vue,react} 存在不同

如需定制线宽，拐角，端点

请参考以下配置

// or svg
.arco-icon { 
  font-size: 32px;
  stroke-linecap: round;
  stroke-linejoin: bevel; 
  stroke-width: 1;
}
// or svg [stroke-width='4']
.arco-icon [stroke-width='4'] {
    stroke-width: 1;
}
// or svg [stroke-linecap='butt']
.arco-icon [stroke-linecap='butt'] {
    stroke-linecap: round;
}