cearte-react-app中craco中优雅引入svg【自定义宽、高、颜色，仅需5步】

第一步：安装依赖 yarn add -D svg-sprite-loader
在src/assets/icons/svg文件夹放入各种.svg文件和index.js

第二步：index.js 代码

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

第三步：入口文件index.js 引入所有的svg

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConfigProvider } from 'antd';
import store from './store'import zh_CN from 'antd/es/locale/zh_CN';
import './index.less';
import App from './App';import './assets/icons/svg';  // 引入svgconst root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><Fragment><BrowserRouter><ConfigProvider locale={zh_CN}><App /></ConfigProvider></BrowserRouter></Fragment></Provider>
)

第四步：在 src/components 中封装自定义SvgIcon组件 SvgIcon.jsx

// src/components/SvgIcon.jsximport React from "react";
import "../assets/icons/svg";const SvgIcon = ({name,color,...props
}) => {const symbolId = `#icon-${name}`return (<svg {...props} aria-hidden="true"><use href={symbolId} fill={color || 'currentColor'} /></svg>)
}export default SvgIcon

最后：在页面中使用svg

import SvgIcon from "@/components/SvgIcon" // @为自定义的根目录function App() {return (<div className="App">{/* name里面上svg的文件名，不要后缀，可以自定义宽高和颜色 */}<SvgIcon name="ios" className="w-10 h-10" /></div>);
}export default App;

cearte-react-app中craco中优雅引入svg【自定义宽、高、颜色，仅需5步】相关推荐

仅需6步，教你轻易撕掉app开发框架的神秘面纱（1）：确定框架方案
遇到的问题做游戏的时候用的是cocos2dx+lua,游戏开发自有它的一套框架机制.而现在公司主要项目要做android和iOS应用.本文主要介绍如何搭建简单易用的App框架. 如何解决对 ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
代码中动态设置view或布局的宽高
有时我们需要在应用中动态改变图片或某一块布局的大小.这就不能用XML文件写成固定值,而需要在java代码中动态设置.效果如下: 网上有一些教程使用relativeView.setLayoutParam ...
html5 canvas 自动改变宽高,H5 canvas中width、height和style的宽高区别详解
前言最近在学习canvas属性中遇到一个小问题,就是canvas的width和height,通过查找相关的资料终于解决,所以下面将解决的过程分享出来给大家,下面话不多说了,来一起看看详细的介绍吧 C ...
php中表格的美化,美化你的表格仅需两步！数据可视化必学！
工作中需要用到图表的地方太多了,但凡跟数据打交道都离不开图表,俗话说:字不如表.表不如图,一个"性感的"图表不但能引起观看者的兴趣,更能让决策者迅速掌握数据中呈现的问题.可视化的呈 ...
仅需三步就可以把代码块完美插入到word中
还在为在word中呈现代码而烦恼吗? 如何在word中插入c++代码? 如何在word中插入代码块? 如何在word中完美的呈现代码? 如何在word中对代码进行排版? 来开始表演了: 1.打开网站 ...
echarts中如何配置图例形状、图标宽高、图标和文字间距、图例位置、文字颜色、字体大小
1.代码和注释如下 var option ={legend: {bottom: '5%',//图例距离整个容器底部的距离left: 'center',//图例距离整个容器左边data: ['完成', ...
仅需6步，教你轻易撕掉app开发框架的神秘面纱（4）：网络模块的封装
程序框架确定了,还需要封装网络模块. 一个丰富多彩的APP少不了网络资源的支持,毕竟用户数据要存储,用户之间也要交互,用户行为要统计等等. 使用开源框架俗话说得好,轮子多了路好走,我们不需要自己造轮 ...
仅需6步，教你轻易撕掉app开发框架的神秘面纱（6）：各种公共方法及工具类的封装
为什么要封装公共方法封装公共方法有2方面的原因: 一是功能方面的原因:有些方法很多地方都会用,而且它输入输出明确,并且跟业务逻辑无关.比如检查用户是否登录,检查某串数字是否为合法的手机号.像这种方法 ...

cearte-react-app中craco中优雅引入svg【自定义宽、高、颜色，仅需5步】

cearte-react-app中craco中优雅引入svg【自定义宽、高、颜色，仅需5步】相关推荐

最新文章

热门文章