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