react中如何优雅的使用svg(2)-木庄网络博客

src/components 文件夹下建一个 SvgIcon 文件夹添加 index.jsx 文件

index.jsx 组件内容如下：

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;

style.less

.svg-class {
  display: inline-block;
  overflow: hidden;
  font-size: 14px;
  min-width: 14px;
  width: 1em;
  height: 1em;
}

5、使用

把要使用的的svg文件放到src/icons/svg目录下，使用的时候把svg名称给iconClass即可

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;