在React、Vue项目中如何使用SVG-js教程-PHP中文网

首页

web前端

js教程

在React、Vue项目中如何使用SVG

亚连

Jun 06, 2018 pm 03:24 PM

react

本篇文章主要介绍了在 React、Vue项目中使用SVG的方法，现在分享给大家，也给大家做个参考。

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

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

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

SVG在一般网页中的使用

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

<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>

登录后复制

效果如下：

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

在 Vue中使用 Svg

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

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

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

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

<template>
 <svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  style={{position:&#39;absolute&#39;,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>

登录后复制

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

使用示例如下：

// index.vue
...<svg class="location-icon">
 <use xlink:href="#location" rel="external nofollow" ></use></svg>...

登录后复制

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

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

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

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

import Icon from &#39;vue-svg-icon/Icon.vue&#39;Vue.component(&#39;icon&#39;, Icon)

登录后复制

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

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

<?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>

登录后复制

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

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

<template>
  <icon class="wx-icon" name="wx"></icon></template>

登录后复制

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

在 React中使用 Svg

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

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

render() {
  return (
   <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    style={{position:&#39;absolute&#39;,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>
   )
}

登录后复制

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

// 引用的时候需要将 `xlink:href` 改写成 xlinkHref<svg className="arrow-left">
  <use xlinkhref="#arrow-left" rel="external nofollow" ></use>
 </svg>

登录后复制

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

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

import ReactSVG from &#39;react-svg&#39;

ReactDOM.render(
 <ReactSVG
  path="atomic.svg"
  callback={svg => console.log(svg)}
  className="example"
 />,
 document.querySelector(&#39;.Root&#39;)
)

登录后复制

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

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

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

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

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

以上是在React、Vue项目中如何使用SVG的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7511

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何利用React和WebSocket构建实时聊天应用 Sep 26, 2023 pm 07:46 PM

如何利用React和WebSocket构建实时聊天应用引言：随着互联网的快速发展，实时通讯越来越受到人们的关注。实时聊天应用已经成为现代社交和工作生活中不可或缺的一部分。本文将介绍如何利用React和WebSocket构建一个简单的实时聊天应用，并提供具体的代码示例。一、技术准备在开始构建实时聊天应用之前，我们需要准备以下技术和工具：React：一个用于构建

React前后端分离指南：如何实现前后端的解耦和独立部署 Sep 28, 2023 am 10:48 AM

React前后端分离指南：如何实现前后端的解耦和独立部署，需要具体代码示例在当今的Web开发环境中，前后端分离已经成为一种趋势。通过将前端和后端代码分开，可以使得开发工作更加灵活、高效，并且方便进行团队协作。本文将介绍如何使用React实现前后端分离，从而实现解耦和独立部署的目标。首先，我们需要理解什么是前后端分离。传统的Web开发模式中，前端和后端是耦合在

如何利用React和Flask构建简单易用的网络应用 Sep 27, 2023 am 11:09 AM

如何利用React和Flask构建简单易用的网络应用引言：随着互联网的发展，网络应用的需求也越来越多样化和复杂化。为了满足用户对于易用性和性能的要求，使用现代化的技术栈来构建网络应用变得越来越重要。React和Flask是两种在前端和后端开发中非常受欢迎的框架，它们可以很好的结合在一起，用来构建简单易用的网络应用。本文将详细介绍如何利用React和Flask

如何利用React和RabbitMQ构建可靠的消息传递应用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ构建可靠的消息传递应用引言：现代化的应用程序需要支持可靠的消息传递，以实现实时更新和数据同步等功能。React是一种流行的JavaScript库，用于构建用户界面，而RabbitMQ是一种可靠的消息传递中间件。本文将介绍如何结合React和RabbitMQ构建可靠的消息传递应用，并提供具体的代码示例。RabbitMQ概述：

React响应式设计指南：如何实现自适应的前端布局效果 Sep 26, 2023 am 11:34 AM

React响应式设计指南：如何实现自适应的前端布局效果随着移动设备的普及和用户对多屏幕体验的需求增加，响应式设计成为了现代前端开发的重要考量之一。而React作为目前最流行的前端框架之一，提供了丰富的工具和组件，能够帮助开发人员实现自适应的布局效果。本文将分享一些关于使用React实现响应式设计的指南和技巧，并提供具体的代码示例供参考。使用React的Fle

React代码调试指南：如何快速定位和解决前端bug Sep 26, 2023 pm 02:25 PM

React代码调试指南：如何快速定位和解决前端bug引言：在开发React应用程序时，经常会遇到各种各样的bug，这些bug可能使应用程序崩溃或导致不正确的行为。因此，掌握调试技巧是每个React开发者必备的能力。本文将介绍一些定位和解决前端bug的实用技巧，并提供具体的代码示例，帮助读者快速定位和解决React应用程序中的bug。一、调试工具的选择：在Re

React Router使用指南：如何实现前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南：如何实现前端路由控制随着单页应用的流行，前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库，提供了丰富的功能和易用的API，使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法，并提供一些具体的代码示例。安装ReactRouter首先，我们需

如何利用React和Google BigQuery构建快速的数据分析应用 Sep 26, 2023 pm 06:12 PM

如何利用React和GoogleBigQuery构建快速的数据分析应用引言：在当今信息爆炸的时代，数据分析已经成为了各个行业中不可或缺的环节。而其中，构建快速、高效的数据分析应用则成为了许多企业和个人追求的目标。本文将介绍如何利用React和GoogleBigQuery结合起来构建快速的数据分析应用，并提供详细的代码示例。一、概述React是一个用于构建

See all articles

在React、Vue项目中如何使用SVG

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题