In some modern flat design websites, especially mobile website, often contains a number of simple and clear ICONS, such as the website icon, the user’s default avatar, mobile web switch fixed bar at the bottom of the home page, etc., these ICONS are generally prepared by artists, may be on the elf figure, front-end for cutting.

And, in fact, these simple small icon, no need for the artists to do front end can be used through the SVG code completely draw these simple ICONS, and because these ICONS are described in the code, so if you want to change the icon, for example, changes the color of the icon, the icon shape, size, etc., are just changed a few lines of code, It’s so simple that no artist has to rework it.

This article is not about how to use SVG for drawing, but for those unfamiliar with SVG, it is about how to use SVG in your web site.

Use of SVG in general web pages

SVG uses XML to define images. You can also think of it as a generic HTML tag that is embedded in a web page to create an effect. A basic example of using SVG in a web page is as follows:

The < body > < SVG width = "100" height = "100" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > < the rect width = "100%" height = "100%" style="fill:pink; stroke-width:1; Stroke: RGB (0, 0) "/ > < / SVG > < / body >Copy the code

The effect is as follows:

As you can see, SVG is pretty easy to use on regular web pages, as long as you can draw SVG ICONS, rendering on web pages is not a problem at all.

Use Svg in Vue

You can use SVG in Vue just as you would use SVG in a normal web page, but since YOU’ve chosen Vue to componen your development project, it doesn’t look good to interweave large chunks of SVG into a bunch of components.

One solution is to use SVG’s 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 how it works on mobile).

For example, put all the code for drawing SVG in a file called SVG-icon. vue, with all the icon drawing code separated and named separately using the Symbol tag to avoid confusion, then export the file as a component, introduce the component in the main page, and then, where you need to use SVG ICONS, Bring it in with the USE tag.

An example of the code for svG-draw. vue is as follows:

<template> <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{position:'absolute',width:0,height:0}}> <defs> <symbol viewBox="0 0 26 31" id="location"> <path XMLNS = "http://www.w3.org/2000/svg" d = "M512.571517 c - 0-204.736964 65.907059 370.715183 165.979242 370.715183 370.724393 0 94.440929 35.320437 180.625824 93.462648 246.083651 1.572822 2.690272 3.50994 5.225001 5.817496 7.531534l240.297878 251.597225c1.279133 1.864464 2.736321 3.64297 4.393054 5.298679 2.111081 2.111081 4.418636 3.90596 6.856152 5.402033 14.458293 10.06524 34.491559 8.658194 47.393403-4.242627 3.26537-3.263323 5.78782-6.987135 7.582699-10.960633L783.610536 690.24766c1.867534-1.866511 3.489474-3.88447 4.876054-6.010901 58.951647-65.640999 94.819552-152.431691 94.819552-247.604284C883.305119 231.886301 717.325877 65.907059 512.571517 65.907059zM512.390391 588.611865 C-82.734306 0-149.814074-67.087954-149.814074-149.842727 0-82.753749 67.079768-149.833517 149.814074-149.833517 82.772168 0 149.853667.079768 149.851936 149.833517C662.242328 521.523911 595.161536 588.611865 512.390391 588.611865z" fill="#d81e06"/> </symbol> </defs> </svg></template>Copy the code

The entire VUE component exports a large SVG that contains many small ICONS, similar to sprites, each separated by symbol and named individually for easy reference.

The following is an example:

// index.vue ... <svg class="location-icon"> <use xlink:href="#location"></use></svg>...Copy the code

You should then see the corresponding SVG icon appear in the page:

However, there is still a problem. If the current website needs many SVG ICONS, the file size of SVG-icon. vue will become larger, and the current webpage only needs one of the SVG ICONS. It is better to be able to load on demand, load as many ICONS as the current page needs, and even some ICONS that may or may not appear, load when they should appear, if not, then never load.

There are many such plug-ins on Github, but I would like to introduce one that I think is very useful: VUE-SVG-icon, which is easy to use and quick to use.

First, install the plug-in, and without further ado, register the plug-in in the project entry file for global calls:

import Icon from 'vue-svg-icon/Icon.vue'Vue.component('icon', Icon)Copy the code

Then create a new SVG directory under the/SRC directory of the root directory (currently this path is the only one that can be configured for other paths and directories) and place the SVG file with the SVG icon you want to use in this directory.

For example, the SVG of a wechat icon is as follows:

<? The XML version = "1.0" standalone = "no"? > <! DOCTYPE SVG PUBLIC "- / / / / W3C DTD SVG 1.1 / / EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > < SVG t = "1502683891821" Class = "icon" style = "" viewBox =" 0 0 1024 1024 "version =" 1.1 "XMLNS =" http://www.w3.org/2000/svg "p - id =" 2885" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path D ="M282.6 363.8c-23.7 0-47-15.7-47-38.9 0-23.7 23.3-38.9 46.5-38.9 23.7 0 15.2 38.9 38.9 0.5 23.2-15.1 38.9-38.4 ZM500.4 286c23.70 38.9 15.2 38.9 38.90 23.3-15.2 38.9-38.9 38.9-23.3 0-47-15.7-47-38.9 0-23.7 23.7-38.9 47-38.9z M167.7 84.5c9.8 0 19.7 0.5 30 1.8-27.3-125.6-161.4-218.7-314.4-218.7C212.4 153.6 72 270.3 72 418.3c0 85.9 46.5 155.6 124.8 210.2 L-31.3 93.9 109.1-54.6 C38.9 7.6 70.2 15.7 109.1 15.7 9.4 0 19.2-0.5 29.1-1.3-6.3-20.6-9.8-42.9-9.8-65.3-0.1-136-116.6-246.4-265.1-246.4 - z "p - id =" 2886 "> < / path > < path d =" M772.7 573.9-15.2 c 0-30.9-15.2-30.9-30.9 0.5-15.7 15.7-31.3 30.9-31.3 23.7 0 39.4 15.7 39.4 31.3-0.1 15.7-15.7 30.9-39.4 30.9z m-171.3 0c-15.2 0-30.9-15.2-30.9-30.9s15.7-31.3 30.9-31.3 C23.7 0 38.9 15.7 38.9 31.3 0.5 15.7-15.2 30.9-38.9 30.9zM952 613.3C952 488.5 827.2 387 687.3 387C-148 0-264.7 101.5-264.7 226.3 0 124.8 116.7 225.8 264.7 225.8 31.3 0 62.6-8.1 93.5-15.7 L85.9 47-23.7-77.8 c62.5 47 109-109.1-109-179.3 - z "p - id =" 2887 "> < / path > < / SVG >Copy the code

Save the above code to a.svg file, such as wx.svg, in the/SRC/SVG directory to complete the preparation.

Then, if you want to use it, you can simply write it in the Vue component like this:

<template>
    <icon class="wx-icon" name="wx"></icon></template>Copy the code

When you refresh the page, open the console and see that the wx.svg file is loaded in the page, thus enabling the import of SVG files on demand.

Use Svg in React

Like VUE, there are three ways to use Svg in React. One is to write the Svg code directly in the React Reader method. The other is to put all the Svg drawing code into a file and load the file at once. The third is to use plug-ins to introduce on demand.

The first way to write SVG directly into a render method is less detailed, and the second is quite simple, just like Vue, with a bit of attention.

render() { return ( <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{position:'absolute',width:0,height:0}}> <defs> <symbol viewBox="0 0 26 31" id="location"> <path fill="#FFF" FillRule ="evenodd" d="M22.116 22.601 C-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 </path> </symbol> <symbol viewBox="0 0 14 8" id="arrow"> <path fill="#FFF" FillRule ="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412 h.994c -.107 0. 1.412 l5.176 372.628.412 5.176 z > "< / path > < / symbol > < / SVG >)}Copy the code

Note that react uses the JSX syntax, which does not allow hyphens, so properties such as fillRule must be written as fillRule, as well as references.

<use xlinkHref="#arrow-left"></use> </ SVG >Copy the code

The third option, introduced on demand, loads only the currently needed SVG shape, again saving each SVG image as a separate file and then referencing where it is needed. There is a project on Github called React-SVG which is essentially a wrapper for SVGInjector.

After installing React-SVG, you can use it like this:

import ReactSVG from 'react-svg'

ReactDOM.render(
  <ReactSVG
    path="atomic.svg"
    callback={svg => console.log(svg)}
    className="example"
  />,
  document.querySelector('.Root')
)Copy the code

Generally only consider when using insets mark SVG, and these small icon is contracted, generally, there is no difficult to draw up, but in most cases there’s no need to paint, many web sites provide SVG icon to download, such as ali iconfont, ICONS are numerous, basic can meet the needs of the vast majority of, in addition, Similar sites include Easyicon, IComoon and others.

— — — — — — — — —

Long press the QR code to follow the big Zhuan FE