vue项目使用svg文件

最新推荐文章于 2024-03-16 10:59:50 发布

灵梦归希

最新推荐文章于 2024-03-16 10:59:50 发布

阅读量1.1w

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_30167299/article/details/125191994

版权

在vue中使用 svg 有两种方式：

1、使用本地的svg

2、把本地的 svg 上传到 iconfont中，统一生成 symbol 格式的文件引入

本地svg导入

一.建立模板组件

本质上就是构建自定义组件（这里取名:IconSvg）来代替svg标签，目的当然是封装，以便更简单使用。

<template>
  <div class="icon-wrapper">
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="iconName"></use>
    </svg>
  </div>
</template>

<script>
// 引入从iconfont 下载的symbox文件
// import '@/assets/icons/iconfont-svg.js'

// 引入本地的svg文件
// 定义一个加载目录的函数
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('@/assets/icons/svg', false, /\.svg$/)
// 加载目录下的所有的 svg 文件
requireAll(req)
// console.log('I: 加载svg文件:', req.keys())
export default {
  name: 'IconSvg',
  props: {
    name: String,
    prefix: {
      type: String,
      default: 'icon-'
    }
  },
  computed: {
    iconName () {
      let name = `#${this.prefix}${this.name}`
      return name
    }
  }
}
</script>

<style scoped>
/*.icon-wrapper {
  display: inline-block;
}
.icon {
  width: 100%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}*/

.icon-wrapper {
  /* Using currentColor above lets
  us use `color` for changing the color
  of our icons: */
  color: red;

  /* The width and height of the SVG
  was previously set to 1em.
  This allows us to use `font-size`
  to change the size of our icon: */
  font-size: 48px;
}

.icon {
  display: inline-block;
  color: #444444;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

</style>

svg文件通过requireAll函数加载目录下的svg文件进行全部加载。

使用模板的方法为:

比如文件名: home.svg, 例子: <IconSvg name="home"/>

一般这个组件作为全局组件，通过以下方式进行全局添加：

在main.js文件（入口文件）

Vue.component('IconSvg', require(组件路径名).default)

2.加载器配置

在1点中:xlink:href是根据id进行定位资源的。

svg里面并没有包含symbolId，需要使用加载器进行加载，因此才会有本步骤。

如果不采用本步骤，可以类似以下的代码：https://codepen.io/Keyamoon/pen/vEXLQX

html文件：

<html>
<head>
	<title>IcoMoon - SVG Icons</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
</head>
<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 1024 1024">
	<title>home</title>
	<path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
</symbol>
</defs>
</svg>

<svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>
  
</body>
</html>

body {
  font: 32px sans-serif; color: #444;
  margin: 1em;
}
.icon {
	display: inline-block;
	color: #444444;
  width: 1em;
	height: 1em;
	fill: currentColor;
}
.icon-home {
  /* Using currentColor above lets
  us use `color` for changing the color
  of our icons: */
  color: red;
  
  /* The width and height of the SVG
  was previously set to 1em.
  This allows us to use `font-size`
  to change the size of our icon: */
  font-size: 48px;
}

以上是额外扩展，回归主题:

在module的rules中加入:

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

同时test: /\.(png|jpe?g|gif|svg)(\?.*)?$/ 追加exclude: [resolve('src/assets/icons/svg')],

如下：

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

src/assets/icons/svg：是存放svg文件的路径，需要根据实际路径进行替换。

3.安装加载器模块。

在第二点使用加载器：svg-sprite-loader，检测下自己的package.json有没有相关依赖，没有的话，在项目根目录cmd调用：