suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie SVG in React- und Vue-Projekten

So verwenden Sie SVG in React- und Vue-Projekten

亚连
亚连Original
2018-06-06 15:24:092161Durchsuche

Dieser Artikel stellt hauptsächlich die Methode zur Verwendung von SVG in React- und Vue-Projekten vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Einige moderne Flat-Design-Websites, insbesondere mobile Websites, enthalten häufig viele einfache und übersichtliche kleine Symbole, wie z. B. Website-Symbole, Standard-Avatare des Benutzers und feste Umschaltleisten am unteren Rand der mobilen Startseite usw. Diese kleinen Symbole werden normalerweise von Künstlern erstellt und können auf Sprites platziert und dann zugeschnitten und im Frontend angezeigt werden.

Tatsächlich besteht für Künstler keine Notwendigkeit, diese einfachen kleinen Symbole zu erstellen. Das Frontend kann SVG-Code verwenden, um diese einfachen Symbole zu zeichnen, und weil diese Symbole vorhanden sind Mit Codes beschrieben. Wenn Sie diese Symbole ändern möchten, z. B. die Symbolfarbe, die Symbolform, die Größe usw., müssen Sie nur ein paar Codezeilen ändern. Dies ist sehr einfach und nicht erforderlich den Künstler überhaupt zu überarbeiten.

In diesem Artikel wird nicht erklärt, wie man SVG zum Zeichnen von Bildern verwendet. Wenn Sie SVG nicht kennen, können Sie es hier ansehen. In diesem Artikel geht es hauptsächlich um die Verwendung von SVG auf der Website.

Verwendung von SVG in allgemeinen Webseiten

SVG verwendet das XML-Format zum Definieren von Bildern. Sie können es sich auch als allgemeines HTML-Tag vorstellen, das in eingebettet ist Um einen bestimmten Effekt zu erzielen, lautet das grundlegende Beispiel für die Verwendung von SVG auf einer Webseite wie folgt: 

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

Der Effekt ist wie folgt:

Wie Sie sehen, ist die Verwendung von SVG auf einer normalen Webseite sehr einfach. Solange Sie das SVG-Symbol zeichnen können, ist das Rendern auf der Webseite überhaupt kein Problem.

SVG in Vue verwenden

Sie können es in Vue genauso verwenden wie SVG in normalen Webseiten. Da Sie sich jedoch für Vue für ein Komponentenentwicklungsprojekt entschieden haben, Daher ist ein langer SVG-Abschnitt, der zwischen einer Reihe von Komponenten verstreut ist, etwas unansehnlich.

Eine Lösung besteht darin, das Use-Tag von SVG zu verwenden, anstatt den Code zum Zeichnen des SVG-Symbols direkt auf der Hauptseite zu schreiben, diesen großen Codeabschnitt in eine andere Datei einzufügen und dann Use zu verwenden Code zum Zeichnen von Symbolen (anscheinend macht das das mobile Terminal Ele.me so).

Fügen Sie beispielsweise den gesamten SVG-Zeichnungscode in die Datei „svg-icon.vue“ ein. Verwenden Sie Symbol-Tags, um alle Symbolzeichnungscodes zu trennen und separat zu benennen, um Verwirrung zu vermeiden, und behandeln Sie diese Datei dann als Komponente. Exportieren Sie, fügen Sie diese Komponente in die Hauptseite ein und führen Sie sie dann über das Use-Tag ein, wo das SVG-Symbol verwendet werden muss.

svg-draw.vue-Codebeispiel lautet wie folgt: 

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

Die gesamte Vue-Komponente exportiert eine große SVG-Datei, die viele kleine Symbole enthält, ähnlich wie bei Sprite-Diagrammen Benennen Sie sie separat, um sie leichter nachschlagen zu können.

Verwendungsbeispiele sind wie folgt: 

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

Dann können Sie sehen, dass das entsprechende SVG-Symbol erfolgreich auf der Webseite angezeigt wird:

Es gibt jedoch ein weiteres Problem. Wenn die aktuelle Website viele SVG-Symbole verwenden muss, wird die Dateigröße von svg-icon.vue zwangsläufig größer. Der aktuelle Webseitenname muss nur eines der SVG-Symbole verwenden Als Ergebnis werden Hunderte von Symbolen geladen, was offensichtlich nicht sehr benutzerfreundlich ist. Es ist am besten, nur die Symbole zu laden, die die aktuelle Webseite benötigt oder möglicherweise nicht angezeigt werden, werden geladen, wenn sie angezeigt werden sollten. Wenn keine Chance besteht, wird es nie geladen.

Es gibt viele solcher Plug-Ins auf Github. Ich werde ein Plug-In vorstellen, das ich für sehr nützlich halte: vue-svg-icon, das einfach zu verwenden und schnell zu starten ist.

Installieren Sie zunächst dieses Plug-In. Nach Abschluss der Installation registrieren Sie dieses Plug-In in der Eintragsdatei des Projekts, um globale Aufrufe zu ermöglichen: 

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

Dann im Stammverzeichnis /src Erstellen Sie ein neues SVG-Verzeichnis unter dem Verzeichnis (derzeit kann dieser Pfad nur so sein und kann nicht als andere Pfade und Verzeichnisse konfiguriert werden) und legen Sie dann die SVG-Datei des SVG-Symbols ab, das Sie verwenden möchten in diesem Verzeichnis.

Zum Beispiel sieht die SVG-Datei eines WeChat-Symbols wie folgt aus: 

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

Speichern Sie den obigen Code in einer .svg-Datei, z. B. wx.svg, und fügen Sie ihn in /src/ ein. SVG-Verzeichnis, und Sie sind mit der Vorbereitungsarbeit fertig.

Wenn Sie es als nächstes verwenden möchten, schreiben Sie dies einfach direkt in die Vue-Komponente: 

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

Wenn Sie die Seite aktualisieren, Öffnen Sie die Konsole und Sie können sehen, dass die Datei wx.svg auf die Seite geladen wird. Auf diese Weise wird die bedarfsgesteuerte Einführung der SVG-Datei realisiert.

Svg in React verwenden

Svg in React verwenden ist dasselbe wie bei Vue. Eine Möglichkeit besteht darin, direkt in die Reader-Methode von React zu schreiben. SVG-Code, die zweite besteht darin, den gesamten SVG-Zeichnungscode in eine Datei zu packen und die Datei dann auf einmal zu laden, wobei das Use-Tag verwendet wird, um auf das entsprechende SVG-Muster zu verweisen, und die dritte besteht darin, ein Plug-In zu verwenden, um es einzuführen Nachfrage.

第一种直接在 渲染方法中写入 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选中值不更改的问题，具体操作如下

Das obige ist der detaillierte Inhalt vonSo verwenden Sie SVG in React- und Vue-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Welche neuen Spezialeffekte wurden zu vue-cli3.0 hinzugefügt?Nächster Artikel：Welche neuen Spezialeffekte wurden zu vue-cli3.0 hinzugefügt?

In Verbindung stehende Artikel

Mehr sehen