react-native-iconfont-cli icon indicating copy to clipboard operation
react-native-iconfont-cli copied to clipboard

建议可以配置默认颜色

Open boxcc opened this issue 5 years ago • 8 comments

现在生成depends-on时候没法改默认颜色

boxcc avatar Mar 11 '20 16:03 boxcc

颜色不是都可以通过props传入吗?

fwh1990 avatar Mar 12 '20 14:03 fwh1990

我不认为设置默认颜色是个好主意,因为这会把多色彩的图标也重置成单色了,在实际的业务场景中,工作量并不会降低。你觉得呢

fwh1990 avatar Mar 12 '20 14:03 fwh1990

是的 可以通过props传入 现在生成时候会有一个默认颜色生成 比如

/* tslint:disable */
/* eslint-disable */

import React, { FunctionComponent } from 'react';
import { ViewProps } from 'react-native';
import { Svg, GProps, Path } from 'react-native-svg';
import { getIconColor } from './helper';

interface Props extends GProps, ViewProps {
  size?: number;
  color?: string | string[];
}

// If you don't like lots of icon files in your project,
// try to set generate_mode to "all-in-one" in root file "iconfont.json".
// And then regenerate icons by using cli command.
export const Add: FunctionComponent<Props> = ({ size, color, ...rest }) => {
  return (
    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
      <Path
        d="M503 195c-9.8 3.4-18 12.4-20.8 22.4-1.4 5-2.2 51.8-2.2 135V480h-127.4c-86.4 0-130.2 0.8-135.6 2.2-16.6 4.6-27.2 22.8-22.8 38.8 2.8 10 12.8 20 22.8 22.8 5.4 1.4 49.2 2.2 135.6 2.2H480v127.4c0 86.4 0.8 130.2 2.2 135.6 2.8 10 12.8 20 22.8 22.8 16 4.4 34.2-6.2 38.8-22.8 1.4-5.4 2.2-49.2 2.2-135.6V546h127.6c86.2 0 130-0.8 135.4-2.2 16.6-4.6 27.2-22.8 22.8-38.8-2.8-10-12.8-20-22.8-22.8-5.4-1.4-49.2-2.2-135.4-2.2H546v-128.6c-0.2-135.4-0.4-137.8-9.4-147.8-8.4-9.2-22-12.8-33.6-8.6z"
        fill={getIconColor(color, 0, '#333333')}
      />
    </Svg>
  );
};

Add.defaultProps = {
  size: 14,
};

export default Add;

这段代码里就有一个 #3333333 默认颜色了 , 或者应该设置一个开关 不填就不处理 填了就设置成默认颜色?

在项目实际用下来还是比用字体的方便点 但是最大问题是无法处理颜色 比如我要设置某个view下的icon都为#fff 这时候就要一个个设置 是否有解决方法吗? 感谢!!

@fwh1990

boxcc avatar Mar 12 '20 14:03 boxcc

或者应该设置一个开关 不填就不处理 填了就设置成默认颜色?

这个确实可以办得到,不过这样做会导致全部图标都是那个颜色,而不是某个view下面,也许不是你想要的。 还有一种方案是用context,~~这个得基于react 16.8.0+~~

fwh1990 avatar Mar 13 '20 04:03 fwh1990

明白了 或许我可以先尝试一下 感谢 @fwh1990

boxcc avatar Mar 13 '20 05:03 boxcc

我这边做一个context上去,context是可行的补充方案

fwh1990 avatar Mar 13 '20 05:03 fwh1990

目前想了几种方案: 1、增加IconColorContextIconSizeContext,需要什么传什么

<IconColorContext.Provider value="#fff">

2、增加IconContext,传入的value为对象,包含color和size,这种传入复合数据会造成子组件总是重渲染

<IconColorContext.Provider value={{ color: '#fff', size: 20 }}>

3、不处理,由用户自行实现,只需按照如上方案简单的包装即可


考虑中

fwh1990 avatar Mar 13 '20 15:03 fwh1990

目前想了几种方案: 1、增加IconColorContextIconSizeContext,需要什么传什么

<IconColorContext.Provider value="#fff">

2、增加IconContext,传入的value为对象,包含color和size,这种传入复合数据会造成子组件总是重渲染

<IconColorContext.Provider value={{ color: '#fff', size: 20 }}>

3、不处理,由用户自行实现,只需按照如上方案简单的包装即可

考虑中

比较支持第三点,用户自行封装就可以了

goodjun avatar May 10 '21 01:05 goodjun