In some modern flattened design websites, especially mobile websites, there are often many simple and clear icons, such as website icons, user's default avatars, fixed handover bar at the bottom of mobile homepage, etc. These icons are usually done by artists, and may be put on the wizard map, and then cut and display at the front end.
In fact, there is no need for artists to do these simple icons. The front end can draw these simple icons through svg code, and because these icons are described by code, if you want to modify these icons, such as changing the color of the icon, the shape and size of the icon, it is very simple to change a few lines of code. Single, there is no need to rework.
This article is not about how to use SVG to draw. If you don't know svg, you can click on it. View here This article mainly talks about how to use svg in websites.
The Use of SVG in General Web Pages
svg defines an image in XML format. You can also think of it as a general HTML tag, embedded in a web page to show some effect. The basic examples of using svg in a web page are 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 results are as follows:
As you can see, it is very simple to use svg in ordinary web pages. As long as you can draw svg icons, it is not a problem to present them in the web pages at all.
Using Svg in Vue
You can use svg in vue as you would in a normal web page, but since vue has been chosen for component development projects, it's not very nice to have a large section of svg in a bunch of components after all.
One solution is to use the use tag of svg, instead of writing the code to draw the SVG icon directly on the main page, to put this large section of code into another file, and then use the use to refer to the code to draw the icon, which is what the mobile terminal is doing now.
For example, put all the drawing code of SVG into svg-icon.vue file. The drawing code of all icons is separated by symbol s tags and named separately to avoid confusion. Then export the file as a component, introduce the component in the main page, and then introduce it through the use tag where the SVG icon is needed.
The svg-draw.vue code example 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 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>
</defs>
</svg>
</template>The entire vue component exports a large svg, which contains many small icons, similar to a wizard diagram, each of which is separated by symbol s and named separately for easy reference.
The following examples are used:
// index.vue
...
<svg class="location-icon">
<use xlink:href="#location"></use>
</svg>
...Then, you can see the corresponding svg icon in the web page smoothly:
However, there is still a problem. If there are many SVG icons to be used in the current website, the file size of svg-icon.vue will gradually increase. Currently, only one of the SVG icons is needed for web page naming. As a result, you loaded all the SVG codes of hundreds of icons into it, which is obviously not very friendly. It is better to load them on demand. What icons are needed for the current web page? What to load, and even some icons that may not appear, are also loaded when they should appear. If there is no chance to appear, they will never be loaded.
Github has many plug-ins of this kind, and I'll introduce a plug-in that I think is very useful: vue-svg-icon Easy to use and quick to use.
First, install the plug-in, let alone say, after the installation, register the plug-in in the entry file of the project to facilitate global invocation:
import Icon from 'vue-svg-icon/Icon.vue'
Vue.component('icon', Icon)Then create a new svg directory in the / src directory of the root directory (the current path can only be this way, can not be configured to other paths and directories), and then put the svg file of the svg icon you want to use in this directory.
For example, the svg of a tweet 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 in A. SVG file, such as wx.svg, and place it in the / src/svg directory. This completes the preparation.
Then, if you want to use it, it's very simple to write it directly in the vue component.
<template>
<icon class="wx-icon" name="wx"></icon>
</template>
When refreshing the page, open the console, you can see that the page loaded the wx.svg file, so that the SVG file can be imported on demand.
Using Svg in React
There are also three schemes for using svg and vue in React, one is to write svg code directly in react reader method, the other is to put all svg drawing code into a file, then load the file once, use tag to refer to the svg pattern of response, and the third is to use plug-in to introduce it on demand.
The first method of writing svg directly into rendering method is not much to say, and the second method is very simple, just like vue, just need to pay attention to its writing.
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>
)
}It's important to note that because react uses jsx grammar, hyphens are not allowed, so attributes like fill-rule must be written as fillRule, as is the case with references.
// When quoting, you need to rewrite `xlink:href'to Xlink Href
<svg className="arrow-left">
<use xlinkHref="#arrow-left"></use>
</svg>The third is on demand, with a project on Github react-svg The project is actually right. SVGInjector Packaging.
install react-svg After that, it can be used as follows:
import ReactSVG from 'react-svg'
ReactDOM.render(
<ReactSVG
path="atomic.svg"
callback={svg => console.log(svg)}
className="example"
/>,
document.querySelector('.Root')
)Finally, in fact, some simple icons don't have to be drawn by themselves, Ali's. iconfont The website has provided many free and open source SVGs for download and use. The number of icons can meet most of the needs. In addition, similar websites have easyicon , icomoon And so on.