react中如何优雅的使用svg

import React from "react";

import PropTypes from "prop-types";

import styles from "./style.less"; //已启用 CSS Modules

const SvgIcon = props => {

  const { iconClass, fill } = props;

  return (

    <i aria-hidden="true" className="anticon">

      <svg className={styles["svg-class"]}>

        <use xlinkHref={"#icon-" + iconClass} fill={fill} />

      </svg>

    </i>

  );

};

SvgIcon.propTypes = {

  // svg名字

  iconClass: PropTypes.string.isRequired,

  // 填充颜色

  fill: PropTypes.string

};

SvgIcon.defaultProps = {

  fill: "currentColor"

};

export default SvgIcon;

.svg-class {

  display: inline-block;

  overflow: hidden;

  font-size: 14px;

  min-width: 14px;

  width: 1em;

  height: 1em;

}

import React from "react";

import SvgIcon from "@/components/SvgIcon";

const Demo = () => {

    const svgName="content"  // content.svg  已经放到 /src/icons/svg/  目录下

  return <SvgIcon iconClass={svgName} />;

};

export default Demo;