react-native-iconfont-cli
react-native-iconfont-cli copied to clipboard
color不起作用。
const xml = `
<svg t="1626763143756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1958" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M836.664 302.486c17.528-17.184 45.666-16.906 62.85 0.622 17.184 17.528 16.906 45.666-0.622 62.85L536.226 721.514c-17.53 17.186-45.674 16.906-62.858-0.628L124.924 365.33c-17.18-17.53-16.896-45.67 0.634-62.85 17.532-17.18 45.672-16.896 62.852 0.634L505.74 626.92l330.924-324.434z" p-id="1959" fill="#2c2c2c"></path></svg>
`;
let IconDown: FunctionComponent<Props> = ({ size, color, ...rest }) => {
return <SvgXml xml={xml} width={size} height={size} {...rest} />;
};
// 使用
<Iconfont name="down" color="#ff0000" size={px(18)} />
从表现上看,size起作用了,但是color不起作用,传进去红色,但是实际上显示的还是path的默认颜色。 有什么办法可以修改颜色吗?
这里是本地svg,生成的是用SvgXml或者SvgCss组件,但是symbol_url配置生成的是Svg等原生组件,也许这就是差别?看起来应该把SvgXml和SvgCss的template改一下,改成把xml放在生成的组件里面
let IconDown: FunctionComponent<Props> = ({ size, color, ...rest }) => {
const xml = `
<svg t="1626763143756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1958" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M836.664 302.486c17.528-17.184 45.666-16.906 62.85 0.622 17.184 17.528 16.906 45.666-0.622 62.85L536.226 721.514c-17.53 17.186-45.674 16.906-62.858-0.628L124.924 365.33c-17.18-17.53-16.896-45.67 0.634-62.85 17.532-17.18 45.672-16.896 62.852 0.634L505.74 626.92l330.924-324.434z" p-id="1959" fill="${getIconColor(color, 0, '#2c2c2c')}"></path></svg>
`;
return <SvgXml xml={xml} width={size} height={size} {...rest} />;
};