Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

建议可以配置默认颜色 #3

Open
boxcc opened this issue Mar 11, 2020 · 8 comments
Open

建议可以配置默认颜色 #3

boxcc opened this issue Mar 11, 2020 · 8 comments
Labels

Comments

@boxcc
Copy link

boxcc commented Mar 11, 2020

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

@fwh1990
Copy link
Member

fwh1990 commented Mar 12, 2020

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

@fwh1990
Copy link
Member

fwh1990 commented Mar 12, 2020

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

@boxcc
Copy link
Author

boxcc commented Mar 12, 2020

是的 可以通过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

@fwh1990
Copy link
Member

fwh1990 commented Mar 13, 2020

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

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

@boxcc
Copy link
Author

boxcc commented Mar 13, 2020

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

@fwh1990
Copy link
Member

fwh1990 commented Mar 13, 2020

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

@fwh1990
Copy link
Member

fwh1990 commented Mar 13, 2020

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

<IconColorContext.Provider value="#fff">

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

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

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


考虑中

@goodjun
Copy link

goodjun commented May 10, 2021

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

<IconColorContext.Provider value="#fff">

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

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

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

考虑中

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants