I download ICONS
Enter Alibaba vector icon library to choose your favorite icon to download.
2. Customize WebPack configurationyarn eject & svg-sprite-loader & Tree Shaking
The installation
yarn eject
yarn add --dev svg-sprite-loader
Copy the code
In the return-modole-rules-oneof at the end of config/webpack.config.js
To join loader, see options on the website.
Want to empty
// webpack >= 2 multiple loaders
{
test: /.svg$/,
use: [
{loader: 'svg-sprite-loader', options: {}},
{loader: 'svgo-loader', options: {}}
]
},
Copy the code
Continue with the installation
yarn add --dev svgo-loader
Copy the code
Introducing SVG requires the use of require(‘ ICONS /money.svg’) to prevent treeshaking
Nav. TSX code for this stage
import styled from "styled-components"; import {Link} from "react-router-dom"; import React from "react"; require('icons/money.svg'); require('icons/tag.svg') require('icons/statistic.svg') const NavWrapper = styled.nav` line-height: 24px; Box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); > ul { display: flex; > li {width: 33.333333333%; padding: 4px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; .icon{ width: 24px; height: 24px; }}} `; const Nav = () => { return ( <NavWrapper> <ul> <li> <svg className="icon"> <use xlinkHref="#tag"/> </svg> <Link Page to = "/ tags" > tags < / Link > < / li > < li > < SVG className = "icon" > < use xlinkHref = "# money" / > < / SVG > < Link to = "/ money" > account page < / Link > < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;" </NavWrapper>) } export default Nav;Copy the code
Universal misarrangement
If the Cannot find Module problem occurs, use the following statement to troubleshoot
Yarn add@babel/helper-create-regexp-feature-plugin // This module can be installed // or use universal debug rm -rf node_modules yarn installCopy the code
ICONS code optimization: Encapsulate Icon & importAll & Webpack-env
import React from 'react'; let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext); try {importAll(require.context('icons', true, /\.svg$/)); } catch (error) {console.log(error); } type Props = {name: string} // const Icon = (Props: Props) => { return ( <svg className="icon"> <use xlinkHref={'#' + props.name}/> </svg> ); }; export default Icon;Copy the code
Meanwhile, yarn add — dev@types /[email protected] prevents __WebpackModuleApi errors
Encapsulate layout & Create views
import Nav from "./Nav";
import React from "react";
import styled from "styled-components";
const Wrapper = styled.div`
height: 100vh;
display: flex;
flex-direction: column;
`;
const Main = styled.div`
flex-grow: 1;
overflow: auto;
`;
const Layout = (props: any) => {
return (
<Wrapper>
<Main>
{props.children}
</Main>
<Nav/>
</Wrapper>
)
}
export default Layout;
Copy the code