树可摇动图标组件

Question

我在ChakraUI和bootstrap图标上创建了一个自定义设计系统。

Bootstrap图标包含1000+ svg图标。

我创建了一个抽象的Icon组件来对图标名称进行抽象，这看起来更方便。

然而，我不确定这个模块是否会是树形摇摆的，我也不知道如何改变实现使其树形摇摆。

Icon.tsx

import React from 'react'
import * as bootstrapIcons from '@emotion-icons/bootstrap'

// Union of all icon names: 'Alarm' | 'Circle' | 'Square' ...
type IconNames = keyof typeof bootstrapIcons

export const Icon: FC<{name: IconNames}> = ({name}) => {
  const Icon = bootstrapIcons[name]

  return (
    <div>
      <Icon style={{...}} />
    </div>

  )
}

App.tsx

import React from 'react'
import { Icon } from './Icon'

const App = () => {
  return <div>
    <Icon name="Alarm" />
  </div>
}

Answer 1

不能摇动Astrix导入。

一般来说，当涉及到图标时，你可以选择雪碧层或树摇动，但不能同时使用两者。

要让这个特定的库树抖动出图标，您必须将导入和使用更改为如下所示(尚未测试，但应该可以工作)。

import { Alarm } from '@emotion-icons/bootstrap/Alarm';

const Use = () => <Alarm/>

这里肯定有一个警告，在这里可以构建一个可以更改的构建时插件……

<Icon name="Alarm"/>
 // to.
import { Alarm } from '@emotion-icons/bootstrap/Alarm';
<Alarm/>

并删除导入。

astrix导入不能被树摇动的原因是因为javascript是一种非常动态的语言，静态分析使用了哪些键有时是非常困难的。

考虑以下代码

import * as bootstrapIcons from '@emotion-icons/bootstrap'

bootstrapIcons["mralA".reverse()] // which icons should be tree shaken?
const Icons = new Proxy(bootstrapIcons) // which icons should be included? using proxy traps.
const SubSet = PullSubset(bootstrapIcons) // which icons should be included? no matter what the implementation of PullSubset is it will be impossible to preform static analysis on it to determine which icons have been used.