硬code体验不是很好，有没有更优雅的解决方案？

[godtail]

例如我要设置一个和输入框字体一样大小、一样颜色的图标，代码如下：

<View className="search">
  <IconFont size={xxx} color={xxx} name="search"></IconFont>
  <Input type="text" />
</View>

如果用字体方案很简单，不用设置直接就可以使用

但是如果目前我使用svg方案遇到的问题是：

• 需要手动设置size和color，来保持同步
• 有代码洁癖，不喜欢代码中出现写死的size和color

这种有没有比较优雅的方案来解决？

[SolidZORO]

同遇到此问题，不知可否有优雅的解法。

[SolidZORO]

今天看了一下，发现 taro 这边实现 iconfonts 的方案居然是在 bg-image 里面插入了 svg，所以改 css 怕是难现实了，暂时能想到的方案是 ：

interface IProps extends ICompBaseProps {
  prefixIcon?: IconNames;
  suffixIcon?: IconNames;
  color?: string;
  size?: number;
  text?: string;
}

export const IconFontText: React.FC<IProps> = (props) => {
  return (
    <View
      className={cx(
        styles['comp-wrapper'],
        { [styles['comp-wrapper--alwaysDarkMode']]: props.alwaysDarkMode },
        `g-comp--${IconFontText.displayName}`,
        props.className,
      )}
    >
      {props.prefixIcon ? (
        <IconFont name={props.prefixIcon} color={props.color} />
      ) : null}

      <Text style={{ color: props.color }}>{props.text}</Text>

      {props.suffixIcon ? (
        <IconFont name={props.suffixIcon} color={props.color} />
      ) : null}
    </View>
  );
};

也就是（前）【文字】（后）的方案，颜色传一个 color 进去，局限比较大，但目前在项目中还算够用，期待更灵活的方案。

[boxcc]

试了一下 https://antfu.me/posts/icons-in-pure-css-zh 这个方法，似乎没问题