Vue 使用 vue-svg-icon 插件实现 svg 按需加载

2020-06-30 10:31:19 浏览数 (1)

一、svg 在网页中的一般用法

svg 使用 XML 格式定义图像，基本使用如下：

代码语言：javascript复制
<body> 
  <svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <rect width="100%" height="100%" style="fill:red;stroke-width:1;stroke:rgba(0,0,0,1)"/> 
  </svg> 
</body>

二、在 Vue 中使用 svg

可以通过上述的一般用法在 Vue 中直接使用 svg，但既然已经是用 Vue来组件化开发项目了，那么在组件中穿插着一大段的 svg 也显得过于杂乱；

这里可以通过 svg 的 use 标签，将 svg 的一大段绘制代码封装在 symbol 中，然后通过 use 调用。

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

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

代码语言：javascript复制
<template> 
<svg 
  xmlns="http://www.w3.org/2000/svg" 
  xmlnsXlink="http://www.w3.org/1999/xlink" 
  style={{position:'absolute',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 中使用示例：

代码语言：javascript复制
... 
<svg class="location-icon"> 
  <use xlink:href="#location"></use> 
</svg> 
...

不过还有个问题，如果当一个页面需要用到的 svg 图标很多，势必就造成 svg-icon.vue 这个文件非常大，当另一个页面只需要用到其中一个 svg 图标时，就需要把包含几百个图标的 svg 组件加载进去，明显不太友好； 最好是能够实现按需加载，当前页面需要哪些图标就加载哪些。

三、通过 vue-svg-icon 插件实现按需加载

1、安装

代码语言：javascript复制
npm install vue-svg-icon --save-dev

2、在项目的 main.js 入口引入 vue-svg-icon 以便全局调用：

代码语言：javascript复制
import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon);

3、将 svg 图标文件放入 src/svg/

图标文件可以到 iconfont 上下载

4、在组件中按需加载需要的图标

例如 pen.svg 放到了 /src/svg 目录中，在 vue 组件按需加载：

代码语言：javascript复制
<template> 
  <icon name="pen" scale="1"></icon> 
</template>

这里可以通过修改 scale 属性值或在使用的页面中修改 svg 样式来调整图标大小

svg vue.js

0 人点赞