An icon can take many forms. Examples include CSS Sprites, reference font ICONS, pure CSS (simple ICONS), and so on. Advantages and disadvantages are not repeated here, Google. Let’s get down to business and talk about SVG.

1. History of SVG

  • SVG 1.0 was released on September 4, 2001
  • On January 4, 2003, SVG 1.1 was released
  • January 14, 2003: SVG Mobile sub-versions: SVG Tiny and SVG Basic
  • SVG Tiny 1.2 was released on 22 December 2008
  • On 16 August 2011, SVG 1.1 (version 2) was released as the current W3C recommendation
  • The W3C is still working on SVG 2

It has been added to the W3C standards since 2001, and it is time for a change after all this time.

2. How to use SVG in general pages

SVG is an image format based on XML syntax and stands for Scalable Vector Graphics. While other image formats are pixel-based, SVG is a shape description of an image, so it is essentially a text file, small in size and undistorted no matter how many times it is magnified. SVG files can be inserted directly into a web page, become part of the DOM, and then manipulated with JavaScript and CSS.

  • Here is an example of SVG code being inserted directly into a web page.
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:blue; stroke-width:2; Stroke: RGB (0, 0)."/>
</svg>
Copy the code

The effect is as follows:

You can see how simple SVG is and how it works. So how do you use SVG in React? Can reused SVG be introduced as a module? The answer is below.

How to use SVG in React

You could have used SVG as above, but here’s the problem. Duplicate SVG code to copy and paste? Later maintenance and modification have endless trouble. So the idea of componentization. How to compose words. SVG comes on stage with the use tag. Instead of writing the code to draw SVG ICONS directly on the main page, put the large chunk of code in a separate file and reference the icon drawing code with use (which seems to be what Github does).

Let’s talk a little bit about how it works. Look at the code

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
    <symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon" viewBox="0 0 1024 1024" id="bank">
    <defs><style type="text/css"></style></defs>
    <rect width="100%" height="100%" style="fill:rgb(153, 238, 172); stroke-width:2; Stroke: RGB (0, 0)."></rect>    
    </symbol>
</svg>
Copy the code

How to use

    <svg><use xlink:href="#bank"></use></svg>
Copy the code

The id in symbol must correspond to the href in use

This will display the SVG above

So to sum up:

  1. The React project has a separate SVG file
  2. It can be loaded ahead of time or on demand
  3. Use the same as above

Although it can be used, if the direct reference may be packaged error or not displayed, common reasons:

  1. Webpack configuration files that process images or fonts contain SVG processing in the loader.
  2. React-svg, react-svG-loader, react-svg, react-SVG-loader, react-sprite-loader, react-SVG, react-SVG-loader Just look at Google

webpack.config.js

{
      test: /\.(eot|woff2? |ttf|svg)$/, exclude: path.resolve(__dirname,'.. /src/static/icons'), // 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/static/icons'// options: {// symbolId:'[name]'/ /}}Copy the code

high energy alert

After the above configuration can be directly in the component

import '.. /.. /static/icons/bank'; // Import the corresponding bank.svg file... XlinkHref < SVG ><use xlinkHref="#bank"></use></svg>
Copy the code

It can be a bit annoying for a lazy person to import ICONS every time, but the following method will help you import them all at once by creating index.js under the corresponding ICONS file

let requireAll = requireContext => requireContext.keys().map(requireContext)
let svgs = require.context('/'.false, /\.svg$/)
requireAll(svgs)
Copy the code

After introducing index.js directly, all components can happily use all SVG. Of course the default ID is the filename.

Note:

Lazy loading is also possible if you don’t want to import all SVG at once

npm install @babel/plugin-syntax-dynamic-import --save-dev ... // Add plugins to.babelrc"plugins": [
        "@babel/plugin-syntax-dynamic-import",]Copy the code

Can be implemented. If you don’t understand, welcome to leave a message!!