svg在vue里面的使用,封装一个svg组件

前言

　　关于svg的介绍请参考张鑫旭老师的博客：未来必热：SVG Sprite介绍

　　svg的优缺点：

　　　　优点：　　　

• 支持多色图标，不受单色限制。
• 可以通过font-size,color来控制样式
• 可以利用css实现动画
• 缩放不失真
• 减少http请求

　　　　缺点：

• ie9+以上才支持
• 浏览器渲染svg的性能一般，不如png

　font库，可以去阿里巴巴矢量图

普通使用方法

　　第一步：引入项目下面生成的symbol代码：

<script src="./iconfont.js">script>

　　第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
.icon {
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}
style>

　　第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx">use>
svg>

　　详细如下：

 

在vue中封装一个组件

　　第一步：

　　　　在vue脚手架生成的文件夹下的src/components创建一个Svg
Icon.vue文件

 

　　第二步：

　　　　在src目录下创建icons文件下，文件夹下面有svg文件夹和index.js文件

　　　　　　-svg文件夹：存放每个svg文件

　　第三步：

　　　　使用和安装svg-sprite

　　　　这里使用webpack loader中的一个svg-sprite-loader，可以将多个svg打包成svg-spite

　　　　1、安装

npm install svg-sprire-loader --save-dev

　　　　2、配置build/webpack.base.conf.js

　　　　　　

　　　　　在前面添加

{
        test: /\.svg$/,
        loader: "svg-sprite-loader",
        include: [resolve("src/icons")],
        options: {
          symbolId: "icon-[name]"
        }
 },

　　　　　　详细如下：

{
        test: /\.svg$/,
        loader: "svg-sprite-loader",
        include: [resolve("src/icons")],
        options: {
          symbolId: "icon-[name]"
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude:[resolve("src/icons")],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
 },

　　

　　第四步：自动导入

　　　　自动导入需要用到webpack的require context

// require.context的简单介绍
require.context("./file", false, /.file.js$/);
这行代码就会去 file 文件夹（不包含子目录）下面的找所有文件名以 .file.js 结尾的文件能被 require 的文件。就是说可以通过正则匹配引入相应的文件模块。

// require.context有三个参数：
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式

　　　　在src/icons/index.js使用require context

import Vue from 'vue'
import SvgIcon from '../components/SvgIcon.vue'

Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

 　　第五步：在main.js中引入

import '@/icons'

 　　自此，已经完成组件的封装

　　在src/icons/svg下面的各个文件

　　--user.svg

　　--password.svg

　　 

　　完整项目github，点击 

 

　　###打包之前必须修改路径，不然不会显示svg图

　　

在项目目录下
    -config
        -index.js
              
        assetsPublicPath修改为：
        assetsPublicPath: './',

 

转载于:https://www.cnblogs.com/Jiangchuanwei/p/9386792.html