vue2 系列：SvgIcon 组件构建

原创已于 2023-10-25 16:31:02 修改 · 927 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-06-01 16:22:20 首次发布

vue2系列专栏收录该内容

6 篇文章

订阅专栏

该文章详细介绍了如何在Vue项目中创建一个自定义的SvgIcon组件，通过svg-sprite-loader处理SVG图标，将SVG文件集中管理并生成精灵图。同时，文章提到了在main.js中的引入以及在组件中使用SvgIcon的方式，并提醒了如果color属性无效可能的原因。

效果图

1. 组件编写 components/SvgIcon.vue

export default {
  name: "SvgIcon",
  props: {
    name: {
      type: String,
      required: true,
    },
    className: String,
    color: String,
    width: String,
    height: String,
  },
  computed: {
    iconName() {
      return `#icon-${this.name}`;
    },
    svgClass() {
      let className = this.className ? `icon-${this.className}` : "";
      return ["svg-icon", className];
    },
  },
  data() {
    return {};
  },
};
</script>
<template>
  <!-- aria-hidden: 让这个元素对浏览器隐藏 -->
  <svg
    :class="svgClass"
    :style="{ color, width, height }"
    aria-hidden="true"
    v-bind="$attrs"
  >
    <use :xlink:href="iconName" />
  </svg>
</template>

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

2. 在 assets 下创建 icons/svg 文件夹， icons/index.js 文件

2.1 将 .svg 文件保存在 svg 文件夹下

2.2 icons/index.js 编写

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

3. 安装 svg 依赖 svg-sprite-loader

安装 path 依赖 path-browserify

yarn add svg-sprite-loader
yarn add path-browserify
// or
npm install svg-sprite-loader
npm install path-browserify

4. vue.config.js 编写

const { defineConfig } = require("@vue/cli-service");
const path = require("path");

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

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  outputDir: "admin",
  assetsDir: "static",
  lintOnSave: false,
  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src"),
      },
      fallback: {
        path: require.resolve("path-browserify")
      }
    },
  },
  chainWebpack(config) {
    config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
  }
});

5. main.js 编写

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// svg
import "./assets/icons/index.js"; 

import SvgIcon from "@/components/SvgIcon.vue"

Vue.component('SvgIcon', SvgIcon)

new Vue({
  render: h => h(App),
}).$mount('#app')

6. 使用

<template>
  <div id="app">
    <!--  name: 必填 svg 的文件名
          className: 选填 class 类名
          color: 选填 颜色
          width: 选填 宽
          height: 选填 高  -->
    <svg-icon name="user" color="red" width="30" height="30"></svg-icon>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>