C语言学习网

react中怎么优雅的使用svg

发表于:2022-12-07 作者:安全数据网编辑
编辑最后更新 2022年12月07日,这篇文章主要介绍react中怎么优雅的使用svg,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!react中优雅的使用svg的方法:首先安装【svg-sprite-loader】

这篇文章主要介绍react中怎么优雅的使用svg,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

react中优雅的使用svg的方法:首先安装【svg-sprite-loader】,并配置【/config/webpack.config.js】;然后在src文件夹下新建一个icons文件夹;最后设置SvgIcon组件。

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 'base64'; 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使用的名称对应                    }            },

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 Modulesconst SvgIcon = props => {  const { iconClass, fill } = props;  return (      );};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 ;};export default Demo;

以上是"react中怎么优雅的使用svg"这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

0