How to use SVG in React and Vue projects

This article mainly introduces the method of using SVG in React and Vue projects. Now I will share it with you and give you a reference.

In some modern flat design websites, especially mobile websites, they often contain many simple and clear small icons, such as website icons, user default avatars, and fixed switching bars at the bottom of the mobile home page. Etc., these small icons are usually made by artists, and may be placed on sprites, and then cropped and displayed on the front end.

In fact, there is no need for artists to do these simple small icons. The front end can use svg code to draw these simple icons, and, because These icons are described with codes, so if you want to modify these icons, such as changing the icon color, icon shape, size, etc., it is just a matter of changing a few lines of code. It is very simple and there is no need to rework the artist at all.

This article does not explain how to use svg to draw pictures. If you don’t know svg, you can go here to check it out. This article mainly talks about how to use svg in the website.

Use of SVG in general web pages

SVG uses XML format to define images. You can also think of it as a general HTML tag, which is embedded in the web page and presented. To produce a certain effect, the basic example of using svg in a web page is as follows:

The effect is as follows:

As you can see, using svg in an ordinary web page is It's very simple, as long as you can draw the svg icon, rendering it on the web page is not a problem at all.

Using Svg in Vue

You can use svg in Vue just like you use svg in ordinary web pages. However, since you have chosen vue for component development project, so a long section of svg interspersed among a bunch of components is a bit unsightly.

One solution is to use the use tag of svg. Instead of writing the code to draw the svg icon directly in the main page, put this large section of code into another file, and then use use Just quote this code for drawing icons (it seems that this is how Ele.me mobile terminal does it).

For example, put all the code for drawing svg into the svg-icon.vue file. Use symbol tags to separate the drawing codes for all icons and name them separately to avoid confusion. Then treat this file as a component. Export, introduce this component into the main page, and then introduce it through the use tag where the svg icon needs to be used.

svg-draw.vue code example is as follows:

The entire vue component exports a large svg. This svg contains many small icons, similar to sprites. Each icon uses symbols and name them separately for easy reference.

Usage examples are as follows:

// index.vue ......

Then, you can see that the corresponding svg icon appears successfully on the web page:

However, There is another problem. If the current website needs to use a lot of svg icons, the file size of svg-icon.vue will inevitably become larger. The current web page name only needs to use one of the svg icons. As a result, you will have hundreds of icons. The svg code is all loaded in, which is obviously not very friendly. It is best to load it on demand. Just load the icons that the current web page needs. Even some icons that may or may not appear will be loaded when they should appear. If If no chance arises, it never loads.

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 get started.

First of all, install this plug-in, not much to say. After the installation is completed, register this plug-in in the entry file of the project to facilitate global calls:

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

Then in the root directory /src Create a new svg directory under the directory (currently this path can only be like this and cannot be configured as 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 WeChat icon is as follows:

Save the above code into a .svg file, such as wx.svg, and put it in the /src/svg directory, and you are done preparation work.

Next, if you want to use it, it is very simple. Just write this directly in the vue component:

When refreshing the page, open the console and you can see The wx.svg file is loaded into the page. In this way, the on-demand introduction of the svg file is realized.

Using Svg in React

Using Svg in React is the same as vue. There are also three solutions. One is to write directly in the reader method of react. svg code, the second is to put all the svg drawing code into a file, and then load the file at once, using the use tag to reference the corresponding svg pattern, and the third is to use a plug-in to introduce it on demand.

第一种直接在 渲染方法中写入 svg的方法就不多说了，第二种也很简单 ，和 vue一样，只不过写法上需要注意一下。

render() { return (  ) }

主要是需要注意，因为 react使用 jsx语法，不允许出现 - 连字符，所以像 fill-rule这样的属性，就必须写成 fillRule，引用的时候同样如此。

// 引用的时候需要将 `xlink:href` 改写成 xlinkHref

第三种按需引入，只加载当前需要的 svg形状，同样是将每一个 svg图片作为一个单独的文件保存，然后再需要使用的地方进行引用。 Github上有个项目 react-svg，这个项目内部其实是对 SVGInjector的包装，

安装 react-svg之后，就可以像下面这样使用了：

import ReactSVG from 'react-svg' ReactDOM.render(  console.log(svg)} className="example" />, document.querySelector('.Root') )

一般都只是在使用小图标的时候才考虑 svg，而这些小图标一般都比较简约，绘制起来也没什么难度，不过大部分情况下没有必要自己来画，很多网站都提供svg的图标下载，例如阿里的 iconfont，图标数量众多，基本可以满足绝大部分的需求，另外，类似的网站还有 easyicon 、 icomoon等。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

有关在Vue中使用Compass的具体方法？

如何关闭Vue计算属性自带的缓存功能，具体步骤有哪些？

如何解决vue 更改计算属性后select选中值不更改的问题，具体操作如下

The above is the detailed content of How to use SVG in React and Vue projects. For more information, please follow other related articles on the PHP Chinese website!