react中如何優雅的使用svg

react中優雅的使用svg的方法：先安裝【svg-sprite-loader】，並設定【/config/webpack.config.js】；然後在src資料夾下新建一個icons資料夾；最後設定SvgIcon組件。

本教學操作環境：windows7系統、React17版，此方法適用於所有品牌電腦。

相關學習推薦：react影片教學

#react中優雅的使用svg的方法：

react中優雅的使用svg的方法：

1、安裝svg-sprite-loader

yarn  add svg-sprite-loader --dev

or

npm i svg-sprite-loader -D

2、設定/config/webpack.config.js （yarn eject 後的設定）

注意：新加入的loader一定要放到file-loader之前

#原因：webpack的loader執行是從後往前執行的

loader 裡添加如下配置

         {
              test: /\.(eot|woff2?|ttf|svg)$/,
              exclude: path.resolve(__dirname, "../src/icons"), //不处理指定svg的文件(所有使用的svg文件放到该文件夹下)
              use: [
                {
                  loader: "url-loader",
                  options: {
                    name: "[name]-[hash:5].min.[ext]",
                    limit: 5000, // fonts file size <= 5KB, use &#39;base64&#39;; else, output svg file
                    outputPath: "font",
                    publicPath: "font"
                  }
                }
              ]
            },
            {
              test: /\.svg$/,
              loader: "svg-sprite-loader",
              include: path.resolve(__dirname, "../src/icons"), //只处理指定svg的文件(所有使用的svg文件放到该文件夹下)
              options: {
                symbolId: "icon-[name]" //symbolId和use使用的名称对应      <use xlinkHref={"#icon-" + iconClass} />
              }
            },

3、src 資料夾下新建一個icons 資料夾

icons 資料夾下新建svg 資料夾放svg 資料夾

目錄

index.js 載入所有svg 資料夾下svg 檔案

const requireAll = requireContext => requireContext.keys().map(requireContext);
const svgs = require.context("./svg", false, /\.svg$/);
requireAll(svgs);

然後一定要在react入口檔案src/index.js中匯入src/icons /index.js

程式碼如下

import "./icons";

4、SvgIcon 元件

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;

#相關學習推薦：

###javascript影片教學#############

以上是react中如何優雅的使用svg的詳細內容。更多資訊請關注PHP中文網其他相關文章！