반응에서 svg를 우아하게 사용하는 방법

반응에서 svg를 사용하는 우아한 방법: 먼저 [svg-sprite-loader]를 설치하고 [/config/webpack.config.js]를 구성한 다음 src 폴더 아래에 새 아이콘 폴더를 만들고 마지막으로 SvgIcon 구성 요소를 설정합니다. .

이 튜토리얼의 운영 환경: windows7 시스템, React17 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다. Related 학습 권장 사항 : 반응에서 우아하게 SVG를 사용하는 방법 :

1. webpack.config.js (yarn 꺼내기 후 구성)

참고: 새로 추가된 로더는 file-loader 앞에 배치되어야 합니다이유: webpack의 로더 실행은 뒤에서 앞으로 실행됩니다.

로더에 추가 다음과 같이 구성합니다.

yarn  add svg-sprite-loader --dev

3. src 폴더 아래에 새 아이콘 폴더를 만듭니다

아이콘 폴더 아래에 새 svg 폴더를 만들어 svg 파일directory

index.js를 넣어 해당 폴더 아래의 모든 svg 파일을 로드합니다. svg 폴더

npm i svg-sprite-loader -D

그런 다음 반응 항목 파일 src/index.js에서 src/icons/index.js를 가져와야 합니다.

코드는 다음과 같습니다

         {
              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} />
              }
            },

4. src/comComponents 폴더 index.jsx 파일 추가

directory

index.jsx 구성 요소 내용은 다음과 같습니다.

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

style.less

import "./icons";

5를 사용하여 svg 파일을 넣습니다. src/icons/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;

관련 학습 권장사항:

javascript 비디오 튜토리얼

위 내용은 반응에서 svg를 우아하게 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!