Home > Developer > JavaScript
Use SVG in React and Vue projects, vuesvg
Some modern flat design websites, especially mobile websites, often contain many simple and clear small icons, for example, the website icon, the user's default avatar, and the fixed switch bar at the bottom of the mobile webpage homepage. These small icons are generally completed by the artist and may be placed on the sprite graph, and the front end will be cropped for display.
In fact, there is no need for the artist to do these simple small icons. The front-end can use svg to draw these simple icons using code, because these icons are described in code, if you want to modify these icons, such as changing the color, shape, and size of the icons, you only need to modify several lines of code, it is very simple, and there is no need for the artist to redo it.
This document does not describe how to use svg for drawing. If you do not know about svg, You can go here to view it. This article mainly describes how to use svg on a website.
Use of SVG in general web pages
Svg defines an image in XML format. You can also regard it as a common HTML Tag. The basic example of using svg in a webpage is as follows:
<body> <svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" style="fill:pink;stroke-width:1;stroke:rgb(0,0,0)"/> </svg></body>
The effect is as follows:
As you can see, it is very easy to use svg in a common web page. As long as you can draw the svg icon, rendering in the web page is not a problem at all.
Use Svg in Vue
You can use it in Vue just like using svg in a common web page. However, since vue is already selected for componentized development projects, in a bunch of components, after all, a large segment of svg is not very nice.
One solution is to use the use label of svg, instead of directly writing the code for drawing the svg icon on the home page, instead of placing this large segment of code into another file, then use to reference the code for drawing the icon (as if ELE. Me mobile is doing this ).
For example, put all the code that draws svg into a svg-icon.vue file, the code that draws all icons is separated and named separately using the symbol label to avoid confusion, and then export the file as a component, introduce this component on the home page. Next, use the use label to introduce the svg icon.
An example of the svg-draw.vue code 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 65.907059c-204.736964 0-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.611865c-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.851936 67.079768 149.851936 149.833517C662.242328 521.523911 595.161536 588.611865 512.390391 588.611865z" fill="#d81e06"/> </symbol> </defs> </svg></template>
The entire vue component exports a large svg, which contains many small icons, similar to a sprite. Each icon is separated by a symbol and named separately for reference.
Example:
// index.vue...<svg class="location-icon"> <use xlink:href="#location" rel="external nofollow" ></use></svg>...
Then, we can see the corresponding svg icon in the webpage:
However, there is a problem, if the current site needs to use a lot of svg icons, it is bound to cause the size of the svg-icon.vue file gradually become larger, the current page name only needs to use one of the svg icons, as a result, you have loaded all the svg code of several hundred icons, which is obviously unfriendly. It is best to load the code as needed, and load the icons required for the current webpage as needed, even some icons that may not appear are loaded when they appear. If they do not appear, they will never be loaded.
There are many such plug-ins on Github. I will introduce a plug-in that I think is very useful: vue-svg-icon, which is easy to use and quick to use.
First, install the plug-in. After the installation is complete, register the plug-in the project's entry file to facilitate global calls:
import Icon from 'vue-svg-icon/Icon.vue'Vue.component('icon', Icon)
Create an svg directory under the/src directory of the root directory (currently this path can only be like this and cannot be configured as another path or directory ), then put the svg file of the svg icon you want to use in this directory.
For example, the svg of an icon is as follows:
<?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 38.9 15.2 38.9 38.9 0.5 23.2-15.1 38.9-38.4 38.9zM500.4 286c23.7 0 38.9 15.2 38.9 38.9 0 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.2l-31.3 93.9 109.1-54.6c38.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.4z" p-id="2886"></path><path d="M772.7 573.9c-15.2 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.3c23.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.7l85.9 47-23.7-77.8c62.5-47 109-109.1 109-179.3z" p-id="2887"></path></svg>
Save the above Code to A. svg file, such as wx. svg, and put it in the/src/svg directory. This completes the preparation.
Next, if you want to use it, it is very easy to write it directly in the vue component:
<template> <icon class="wx-icon" name="wx"></icon></template>
When you refresh the page, open the console and you can see that the wx. svg file is loaded on the page. In this way, the svg file is introduced on demand.
Use Svg in React
Using Svg in React is the same as using vue. There are also three solutions. One is to directly write svg code in the react reader method, the second method is to put all the svg draw code into a file, load the file at one time, use the use tag to reference the response svg pattern, and the third method is to use the plug-in to introduce it as needed.
The first method writes svg directly in the rendering method, and the second method is very simple. It is the same as vue, but you need to pay attention to the writing method.
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.601c-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 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></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.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path> </symbol> </svg> )}
Note that because react uses the jsx syntax, hyphens are not allowed. Therefore, attributes such as fill-rule must be written as fillRule.
// You need to set 'xlink: href 'is rewritten to xlinkHref <svg className = "arrow-left"> <use xlinkhref = "# arrow-left" rel = "external nofollow"> </use> </svg>
The third method is introduced as needed. It only loads the expected svg shape. It also saves each svg image as a separate file and then references it where it needs to be used. There is a react-svg project on Github, which is actually packaged for SVGInjector internally,
After installing react-svg, you can use it as follows:
import ReactSVG from 'react-svg'ReactDOM.render( <ReactSVG path="atomic.svg" callback={svg => console.log(svg)} className="example" />, document.querySelector('.Root'))
Generally, svg is considered only when small icons are used. These small icons are relatively simple and easy to draw, but in most cases, you do not need to draw them by yourself, many websites provide svg icon downloads, such as Alibaba's iconfont, which has a large number of icons and can basically meet most of the needs. In addition, similar websites include easyicon and icomoon.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
