Vue项目使用SVG图标实践

本文主要介绍在Vue项目中如何使用SVG图标，并提供两个示例说明。

集成SVG图标

安装svg-sprite-loader

svg-sprite-loader将svg文件打包成单个svg sprite，该svg sprite可以通过样式或相关API的方式在您的应用程序中使用。

npm install svg-sprite-loader --save-dev

配置webpack

在 webpack.config.js 添加如下代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          // 配置svg-sprite-loader
          symbolId: 'icon-[name]',
        },
      },
    ],
  },
};

添加完毕后，打开 .vue 文件，使用以下代码导入并使用svg图标。

<template>
  <div>
    <svg class="icon">
      <use xlink:href="#icon-svg"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
    },
  },
};
</script>

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

示例

示例一：使用已有的svg图片

在项目中使用已经存在的SVG图片，此示例使用的SVG图标在public文件夹的img目录中。

项目结构

|-- public
    |-- img
        |-- icon.svg
|-- src
    |-- views
        |-- Home.vue

Home.vue 文件

<template>
  <div class="home">
    <svg-icon class="heart-icon" icon-class="heart"></svg-icon>
  </div>
</template>

<script>
import SvgIcon from "@/components/SvgIcon.vue";

export default {
  components: {
    SvgIcon,
  },
};
</script>

<style scoped>
.heart-icon {
  width: 30px;
  height: 30px;
}
</style>

SvgIcon.vue 文件

<template>
  <svg class="svg-icon" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="`#icon-${iconClass}`" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

webpack.config.js 文件

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.exclude.add(resolve("src/icons"));
    svgRule.include.add(resolve("public/img"));
    svgRule
      .test(/\.svg$/)
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      });
  },
};

示例二：自定义SVG图标

使用iconfont自定义图标，步骤如下：

登录 iconfont
新建项目，并添加图标
在项目中下载SVG文件
项目结构

|-- src
    |-- icons
        |-- svg
            |-- custom-svg.svg
    |-- views
        |-- Home.vue

custom-svg.svg

上传至icons/svg文件夹中，该文件将被作为自定义SVG图标文件。

Home.vue 文件

<template>
  <div class="home">
    <svg-icon class="phone-icon" icon-class="custom-svg"></svg-icon>
  </div>
</template>

<script>
import SvgIcon from "@/components/SvgIcon.vue";

export default {
  components: {
    SvgIcon,
  },
};
</script>

<style scoped>
.phone-icon {
  width: 30px;
  height: 30px;
}
</style>

SvgIcon.vue 文件

<template>
  <svg class="svg-icon" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="`#icon-${iconClass}`" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

webpack.config.js 文件

在vue.config.js中，添加如下代码：

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.exclude.add(resolve("src/icons/svg"));
    svgRule.include.add(resolve("src/icons/svg"));
    svgRule
      .test(/\.svg$/)
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      });
  },
};