one-react / icons

A collection of cosmetic💄, light-lux 👜💍 UI components written with React.
https://one-react.github.io/icons
MIT License
8 stars 2 forks source link

转换出的ReactComponent path携带fill,设置fill失效 #50

Closed DStar2013 closed 4 years ago

DStar2013 commented 4 years ago

使用你这个项目的svgr.config.js 文件

image

执行: npx @svgr/cli@3.1.0 assets --ext tsx --out-dir icons --config-file svgr.config.js

转换后的Component

// Generated from assets\FilledCheck.svg
import React, { PureComponent } from "react";

interface Props {
  /**
   * additional classname
   */
  // prettier-ignore
  className?: string;
  /**
   * size of the svg icon
   */
  // prettier-ignore
  size?: string | number;
  /**
   * color of the svg icon
   */
  // prettier-ignore
  fill?: string;
  /**
   * onClick event
   */
  // prettier-ignore
  onClick?: React.MouseEventHandler<SVGSVGElement>
}

const style = {
  display: "block",
  flex: "0 0 auto",
  cursor: "pointer"
};

export class SvgFilledCheck extends PureComponent<Props, {}> {
  render() {
    const props = this.props;
    const { size, fill } = props;
    return (
      <svg
        {...props}
        preserveAspectRatio="xMidYMid meet"
        fontSize={size || 32}
        fill={fill || "currentColor"}
        style={style}
        viewBox="0 0 512 512"
        width="1em"
        height="1em"
      >
        <path
          d="M256 487.955c-128.682 0-233-104.094-233-232.5s104.318-232.5 233-232.5c128.682 0 233 104.094 233 232.5s-104.318 232.5-233 232.5zm-38.554-154.8l-98.89-98.889-21.212 21.213 98.995 98.995 21.107 21.108L422.507 170.52l-21.213-21.213-183.848 183.847z"
          fill="#000"
          fillRule="evenodd"
        />
      </svg>
    );
  }
}

项目中生成的Svg Path是不带fill="#000",是什么地方需要配置吗? @foryuki

DStar2013 commented 4 years ago

svgo的配置