在React、Vue项目中如何使用SVG-创新互联

这篇文章将为大家详细讲解有关在React、Vue项目中如何使用SVG，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

站在用户的角度思考问题，与客户深入沟通，找到金塔网站设计与金塔网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖金塔地区。

在一些现代的扁平化设计网站，特别是移动端网站，经常会包含许多简单而清晰的小图标，例如网站图标、用户的默认头像、移动端网页首页底部固定的切换栏等，这些小图标一般都是由美工做好，可能会放到精灵图上，前端再进行裁切展示。

而实际上，这些简单的小图标完全没必要让美工来做，前端完全可以通过 svg使用代码把这些简单的图标画出来，并且，因为这些图标是用代码描述出来的，所以如果想要修改这些图标，例如改变图标的颜色、图标的形状、大小等，都只是改几行代码的事情，非常简单，根本无需美工返工重做。

本文不是阐述如何利用 svg 来进行画图的，不了解 svg的可以前往 这里查看， 本文主要说一下如何在网站中使用 svg。

SVG在一般网页中的使用

svg使用 XML 格式定义图像，你也可以把它看做是一般的 HTML标签，镶嵌在网页中呈现出某种效果，在网页中使用svg的基本示例如下：

效果如下：

可以看到，普通网页中使用 svg是很简单的，只要你能把 svg图标画出来，在网页中的呈现完全不是问题。

在 Vue中使用 Svg

你完全可以像在 普通网页中使用 svg那样在Vue中使用，不过，既然已经是选择 vue来组件化开发项目了，那么在一堆组件中，穿插一大段的 svg毕竟有点不太好看。

一种解决方法是，利用 svg的 use标签，不直接在主页面中编写绘制svg图标的代码，而是把这一大段的代码放到另外的文件中，然后使用 use引用这段绘制图标的代码即可（好像饿了么移动端就是这么干的）。

例如，将所有绘制 svg的代码放到 svg-icon.vue文件中，所有图标的绘制代码使用 symbol标签分隔开并单独命名，避免错乱，然后将这个文件当做是一个组件导出，在主页面中引入此组件，接着，在需要 使用 svg图标的地方，通过 use标签将其引入。

svg-draw.vue代码示例如下：

整个 vue组件导出一个大的 svg，此svg中包含了许多小的图标，类似于精灵图，每个图标使用 symbol分隔，并单独命名以方便引用。

使用示例如下：

// index.vue
...
 ...

然后，就可以看到网页中顺利出现对应的 svg图标了：

不过，还有个问题，如果当前网站需要用到的 svg图标很多，势必就造成 svg-icon.vue这个文件体积逐渐变大，当前网页命名只需要用到其中一个 svg图标，结果你把几百个图标的 svg代码，全部加载了进来，明显不太友好，最好是能够按需加载，当前网页需要哪些图标就加载哪些，甚至一些可能出现可能不出现的图标，也在该出现时再加载，如果没有机会出现，那么永远不加载。

Github上有很多此类的插件，我介绍一个我觉得很好用的插件：vue-svg-icon，简单易用、快速上手。

首先，安装此插件，就不多说了，安装完成后，在项目的入口文件中注册此插件以方便全局调用：

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

然后在根目录的 /src目录下新建一个 svg目录（目前这个路径只能是这样，不可配置为其他路径和目录），然后再这个目录中放入你想要使用的 svg图标的 svg文件即可。

例如一个微信图标的 svg如下：

将上述代码保存到一个 .svg的文件中，例如 wx.svg，放到 /src/svg目录中，这样就完成了准备工作。

接着，想要使用的话，很简单，直接在 vue组件中这么写：

刷新页面时，打开控制台，可以看到页面中加载了这个 wx.svg文件，这样，就实现了 svg文件的按需引入。

在 React中使用 Svg

在 React中使用Svg和 vue一样，同样存在 3种方案，一种是直接在 react的 reader方法中写入 svg代码，第二种则是将所有 svg绘制代码放到一个文件中，然后将这个文件一次性载入，使用 use标签引用响应的 svg图案，第三种则是使用插件按需引入。

第一种直接在 渲染方法中写入 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等。

关于“在React、Vue项目中如何使用SVG”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：在React、Vue项目中如何使用SVG-创新互联
本文URL：http://mswzjz.cn/article/gghdj.html