关于如何在项目中封装一个 svg-icon 组件的详细步骤

话不多说，直接上封装步骤：

1. 首先，安装依赖（本次封装的 svg-icon 组件需要此依赖的配合）

npm i [email protected]

2. 配置 vue.config.js

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
 // 这个配置 是为了给 src 文件起别名 @,方便后面文件的导入
  configureWebpack: {
    // name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
// 这个是 webpack 配置在 vue.config  里面的一个判断
  chainWebpack(config) {

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      // 判断
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      // 使用
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        // 1.关键, [name][ext][hash]=>中括号前面表示文件名，后面表示 hash 名
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

3. 创建文件（下面就纯纯体力活了）

本次创建的文件都在 src 里面

3.1 src/icons

src/icons
-       /svg       # 保存图标
-       /index.js  # 注册全局组件

（1） icons 文件下的 svg 文件就是 svg 图标，这个需自行去下载（如 iconfont 官网）

（2）index.js 文件配置

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

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

3.2 utils/validate.js

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

3.3 componets/SvgIcon/index.vue 组件

（1）index.vue 配置

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  
  <!-- svg 就是原生的 dom 标签 -->
 
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
 
<script>

import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

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

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>

4. 在main.js中引入

import '@/icons'

5.使用

使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名

到这就大功告成啦~~~

最后，如果在运行项目时出现错误 “Error: Cannot find module ‘webpack/lib/RuleSet”，可以参考下面这篇文章，可能有所帮助

关于 Error: Cannot find module ‘webpack/lib/RuleSet‘ 的详细解决方法（亲测有效）- 以及删除脚手架的方法_zzuli 山之涯海之角的博客-CSDN博客

关于如何在项目中封装一个 svg-icon 组件的详细步骤

猜你喜欢