Vue项目中通过svg代码引入iconfont图标

• 我们在写一些页面的时候，总是要用到一些小图标，而且为了不失真很多人会下载svg图片，这时候我们就要在iconfont中去寻找，今天下午波煮就用到了这个，研究了好一会儿终于也是把它引入了哈，所以在这里给大家分享一下，少走弯路哈。
• 这里波煮分享的是通过svg代码引入

引入步骤

1. 在iconfont官网中找到你想要引入的图标，并点击下载按钮，会出现如图：

2. 现在你可以下载png格式的图片或者下载svg格式的图片，这种下载之后然后你直接把它放到你的项目中按照路径引入即可，很简单这里不做赘述。
3. 点击复制svg代码，然后打开你的项目，在src目录中的assets目录（存放静态资源目录）中新建一个.vue项目，在template标签中放入刚刚复制的svg代码

<template>
  <svg
    t="1744542890333"
    class="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="907"
    width="200"
    height="200"
  >
    <path
      d="M714.24 367.808C693.9904 213.0432 542.4896 92.9536 358.4 92.9536 160.5888 92.9536 0 232.5888 0 403.4176c1.0752 83.328 38.0544 162.1376 101.4656 216.2048 24.896 22.1056-38.8736 139.6352-7.4496 154.0608 3.2768 1.4976 6.8608 2.2144 10.4704 2.0992 43.2896 0 148.2496-67.0208 188.2752-67.0208H296.96c20.3392 3.0848 40.8704 4.6464 61.44 4.6464 14.7712 0.0512 29.5296-0.7296 44.224-2.3296 35.136 118.464 158.72 205.7344 305.8048 205.7344a378.4704 378.4704 0 0 0 54.2208-3.9552c2.7136-0.2432 5.44-0.2432 8.1536 0 30.016 0 78.656 18.1504 111.0144 18.1504 6.6944 0.256 13.3632-0.9344 19.5456-3.4944 27.4688-13.0304 11.4048-73.7792 33.28-93.0944a256.02176 256.02176 0 0 0 89.3696-192C1024 492.3136 885.76 370.368 714.24 367.808zM358.4 655.4624c-17.6896-0.0256-35.3408-1.344-52.8256-3.9552a79.1424 79.1424 0 0 0-12.8 0 313.32992 313.32992 0 0 0-114.9696 37.696l-22.1056 8.8448c11.1744-43.52 19.776-90.5344-15.36-121.9456a231.07072 231.07072 0 0 1-82.1504-172.6848c0-139.6352 134.7456-252.2752 300.224-252.2752 153.6 0 279.2704 96.3456 297.6512 221.0944-149.6448 21.4144-263.4496 134.7456-263.4496 270.8992-0.2304 3.7248-0.2304 7.4496 0 11.1744-11.3792 1.0496-22.7968 1.4464-34.2144 1.152z m537.3696 135.68a116.42624 116.42624 0 0 0-32.8192 79.5904c-8.1408-1.3952-16.9856-3.4944-25.3696-5.5808a310.23872 310.23872 0 0 0-66.7904-10.24c-5.6832-0.0896-11.3664 0.2944-16.9984 1.1648a326.3104 326.3104 0 0 1-45.376 3.2512c-117.9904 0-217.8304-67.0208-248.0896-158.016a183.98848 183.98848 0 0 1-9.536-57.7152c0-104.4992 88.4352-192.2304 205.9648-212.2496 17.0624-3.008 34.3424-4.4928 51.6608-4.4288h7.4496c138.4704 3.264 249.9456 99.1488 249.9456 216.4352a199.01184 199.01184 0 0 1-70.0416 147.7888zM247.6288 296.128c-14.1184 0-26.8544 8.4992-32.256 21.5424a34.90816 34.90816 0 0 0 7.5648 38.0416c9.984 9.984 24.9984 12.9664 38.0416 7.5648a34.90944 34.90944 0 0 0 21.5424-32.256c0.0128-19.264-15.616-34.8928-34.8928-34.8928z m221.7856 0c-14.1184 0-26.8416 8.4992-32.256 21.5424a34.90816 34.90816 0 0 0 7.5648 38.0416c9.984 9.984 24.9984 12.9664 38.0416 7.5648a34.92096 34.92096 0 0 0 21.5552-32.256c0-19.264-15.6288-34.8928-34.9056-34.8928z m139.6352 272.9856c-19.2768 0-34.9056 15.6288-34.9056 34.9056 0 19.2768 15.6288 34.9056 34.9056 34.9056 19.2768 0 34.9056-15.6288 34.9056-34.9056 0-9.2544-3.6736-18.1376-10.2272-24.6912a34.96064 34.96064 0 0 0-24.6784-10.2144z m167.5648 0c-19.2768 0-34.9056 15.6288-34.9056 34.9056 0 19.2768 15.6288 34.9056 34.9056 34.9056 19.2768 0 34.9056-15.6288 34.9056-34.9056 0-9.2544-3.6736-18.1376-10.2272-24.6912a34.96064 34.96064 0 0 0-24.6784-10.2144z m0 0"
      p-id="908"
      fill="#289f13"
    ></path>
  </svg>
</template>

4. 在你需要使用这个图标的文件中引入即可，这里我按照ES6引入规范

import iconWeiXin from '../assets/icons/weixin.vue'

5. 使用即可:单标签或者双标签都行

<iconWeiXin />

6. 效果：