color不起作用。

[chj-damon]

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的默认颜色。
有什么办法可以修改颜色吗？

[chj-damon]

这里是本地svg，生成的是用SvgXml或者SvgCss组件，但是symbol_url配置生成的是Svg等原生组件，也许这就是差别？看起来应该把SvgXml和SvgCss的template改一下，改成把xml放在生成的组件里面

[chj-damon]

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} />;
};