Comment utiliser SVG dans les projets React et Vue-js tutoriel-php.cn

Cet article présente principalement la méthode d'utilisation de SVG dans les projets React et Vue. Maintenant, je le partage avec vous et le donne comme référence.

Certains sites Web modernes au design plat, en particulier les sites Web mobiles, contiennent souvent de nombreuses petites icônes simples et claires, telles que des icônes de sites Web, des avatars par défaut des utilisateurs et des barres de commutation fixes en bas de la page d'accueil mobile, etc. ces petites icônes sont généralement créées par des artistes et peuvent être placées sur des sprites, puis recadrées et affichées sur le front-end.

En fait, les artistes n'ont pas besoin de créer ces simples petites icônes. Le front-end peut utiliser du code SVG pour dessiner ces icônes simples, et, parce que ces icônes sont. décrit avec des codes, donc si vous souhaitez modifier ces icônes, comme changer la couleur de l'icône, la forme de l'icône, la taille, etc., il suffit de changer quelques lignes de code. C'est très simple et ce n'est pas nécessaire. retravailler l'artiste du tout.

Cet article n'explique pas comment utiliser SVG pour dessiner des images. Si vous ne connaissez pas SVG, vous pouvez aller ici pour le voir. Cet article explique principalement comment utiliser SVG sur le site Web.

Utilisation de SVG dans les pages Web générales

SVG utilise le format XML pour définir les images. Vous pouvez également le considérer comme une balise HTML générale, intégrée dans le fichier. page Web et présenté. Pour produire un certain effet, l'exemple de base d'utilisation de svg dans une page Web est le suivant :

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

Copier après la connexion

L'effet est le suivant :

Comme vous pouvez le voir, il est utilisé dans les pages Web ordinaires. SVG est très simple Tant que vous pouvez dessiner l'icône SVG, son rendu sur la page Web n'est pas du tout un problème.

Utiliser SVG dans Vue

Vous pouvez l'utiliser dans Vue tout comme vous utilisez SVG dans des pages Web ordinaires. Cependant, puisque vous avez choisi Vue pour un projet de développement de composants, donc une longue section de svg intercalée parmi un tas de composants est un peu disgracieuse.

Une solution consiste à utiliser la balise use de svg. Au lieu d'écrire le code pour dessiner l'icône svg directement dans la page principale, placez cette grande section de code dans un autre fichier, puis utilisez use. Citez simplement ceci. code pour dessiner des icônes (il semble que c'est ainsi que le terminal mobile Ele.me le fait).

Par exemple, placez tout le code de dessin svg dans le fichier svg-icon.vue. Utilisez des balises de symboles pour séparer tous les codes de dessin d'icônes et nommez-les séparément pour éviter toute confusion, puis traitez ce fichier comme un composant. Exportez, introduisez ce composant dans la page principale, puis introduisez-le via la balise use où l'icône svg doit être utilisée.

L'exemple de code SVG-DRAW.VUE est le suivant :

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

Copier après la connexion

L'ensemble du composant vue exporte un grand SVG. Ce SVG contient de nombreuses petites icônes, similaires aux graphiques de sprites, chaque icône est. séparés par des symboles et nommés individuellement pour une référence facile.

Les exemples d'utilisation sont les suivants :

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

Copier après la connexion

Ensuite, vous pouvez voir l'icône svg correspondante apparaître avec succès sur la page Web :

Cependant, il y a toujours un problème. Si le site Web actuel doit utiliser beaucoup d'icônes SVG, la taille du fichier SVG-ICON.VUE deviendra progressivement plus grande. Le nom de la page Web actuelle ne devra utiliser qu'une seule des icônes SVG. En conséquence, vous aurez des centaines d'icônes SVG. Les codes SVG des icônes sont tous chargés, ce qui n'est évidemment pas très convivial. Il est préférable de les charger à la demande. pour la page Web actuelle. Même certaines icônes qui peuvent ou non apparaître seront chargées lorsqu'elles devraient apparaître, si aucune opportunité ne se présente, elles ne seront jamais chargées.

Il existe de nombreux plug-ins de ce type sur Github. Je vais vous présenter un plug-in qui me semble très utile : vue-svg-icon, qui est facile à utiliser et rapide à prendre en main.

Tout d'abord, installez ce plug-in. Pas grand chose à dire. Une fois l'installation terminée, enregistrez ce plug-in dans le fichier d'entrée du projet pour faciliter les appels globaux :

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

Copier après la connexion

Ensuite, dans le répertoire racine, créez un nouveau répertoire svg sous le répertoire /src (actuellement, ce chemin ne peut être que comme ceci et ne peut pas être configuré comme d'autres chemins et répertoires), puis placez le fichier svg de l'icône svg que vous souhaitez à utiliser dans ce répertoire.

Par exemple, le svg d'une icône WeChat est le suivant :

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

Copier après la connexion

Enregistrez le code ci-dessus dans un fichier .svg, tel que wx.svg, et placez-le dans le dossier / Répertoire src/svg, comme ceci Les préparatifs sont terminés.

Ensuite, si vous souhaitez l'utiliser, c'est très simple, écrivez simplement ceci directement dans le composant vue :

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

Copier après la connexion

Lors du rafraîchissement du fichier. page, ouvrez la console, vous pouvez voir que le fichier wx.svg est chargé dans la page, de cette manière, l'introduction à la demande des fichiers svg est réalisée.

Utiliser SVG dans React

Utiliser SVG dans React est la même chose que vue. Il existe également trois solutions. La première consiste à écrire directement dans la méthode de réaction du lecteur. code svg, la seconde consiste à mettre tout le code de dessin svg dans un fichier, puis à charger le fichier en même temps, en utilisant la balise use pour référencer le motif svg correspondant, et la troisième consiste à utiliser un plug-in pour l'introduire sur demande.

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

Copier après la connexion

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

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

Copier après la connexion

第三种按需引入，只加载当前需要的 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;)
)

Copier après la connexion

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

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!