【VUE学习】权限管理系统前端vue实现4-自定义icon实现

1.component下新建SvgIcon目录，再新建index.vue 定义svg-icon组件

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

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
  icon: {
    type: String,
    required: true
  }
})

const iconName = computed(() => {
  return `#icon-${props.icon}`
})
</script>

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

• <template> 部分：定义了组件的模板内容。在这里，使用了 <svg> 标签来创建一个 SVG 图标元素，并添加了一个 use 元素来引用具体的图标。:xlink:href 属性使用了绑定语法，将 iconName 绑定为 use 元素的 xlink:href 属性的值。

• <script setup> 部分：使用了 Vue 3 的 <script setup> 语法，用于编写组件的逻辑部分。在这里，使用了 defineProps 函数定义了一个 props 对象，其中包含了一个名为 icon 的属性。icon 属性的类型为字符串，并且设置为必需的。然后，使用 computed 函数创建了一个名为 iconName 的计算属性。计算属性的值是根据 props.icon 来拼接出一个具体的图标名称，用于在 <use> 元素的 xlink:href 属性中引用。

• <style lang="scss" scoped> 部分：定义了组件的样式规则。在这里，.svg-icon 选择器设置了 SVG 图标元素的样式。它的宽度和高度都是 1em，相对于当前的字体大小进行缩放。vertical-align 属性设置垂直对齐方式为 -0.15em，使图标能够与相邻的文本垂直对齐。fill 属性设置图标的填充颜色为当前文本颜色。overflow 属性设置为 hidden，以防止图标的内容溢出。

2.新建icons文件夹，放一个svg文件的文件夹目录，以及新建index.js，全局定义组件

svg里面 假如 svg 图片

import SvgIcon from '@/components/SvgIcon'

const svgRequired = require.context('./svg', false, /\.svg$/)
svgRequired.keys().forEach((item) => svgRequired(item))

export default (app) => {
  app.component('svg-icon', SvgIcon)
}

export default (app) => { ... }：通过导出一个函数作为插件的形式，使得该插件可以被 Vue 应用实例使用。该函数接收一个名为 app 的参数，表示 Vue 应用实例。

这个插件的作用是将 SVG 图标组件注册为全局组件，同时动态导入 SVG 图标文件，以便在整个应用中使用该组件来显示各种 SVG 图标。使用者只需在需要显示 SVG 图标的地方使用 <svg-icon> 标签，并通过属性指定具体的图标名称，插件会自动根据图标名称来加载相应的 SVG 图标文件并显示出来。

3.添加webpack  和 svg-sprite-loader  依赖 

4.修改vue.config

const webpack = require('webpack');

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

module.exports = {
  lintOnSave: false,

  chainWebpack(config) {
    // 设置 svg-sprite-loader
    // config 为 webpack 配置对象
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
        // 规则
        .rule('svg')
        // 忽略
        .exclude.add(resolve('src/icons'))
        // 结束
        .end()
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
        // 规则
        .rule('icons')
        // 正则，解析 .svg 格式文件
        .test(/\.svg$/)
        // 解析的文件
        .include.add(resolve('src/icons'))
        // 结束
        .end()
        // 新增了一个解析的loader
        .use('svg-sprite-loader')
        // 具体的loader
        .loader('svg-sprite-loader')
        // loader 的配置
        .options({
          symbolId: 'icon-[name]'
        })
        // 结束
        .end()
    config
        .plugin('ignore')
        .use(
            new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
        )
    config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        })
        .end()
  }
}

        这段代码主要是在 Vue CLI 的配置文件中，通过 webpack 的链式配置方法 chainWebpack 来修改 webpack 的处理规则。其中包括了对 SVG 文件的处理，将其转换为 SVG sprite 图标，并设置了一些插件和选项。这样，项目在构建时可以自动处理 SVG 图标，并生成 SVG sprite，以便在应用中使用。同时，也通过插件来优化构建结果，减少打包体积。

5.main.js修改

import SvgIcon from '@/icons'

const app=createApp(App)
SvgIcon(app);

app.use(store)

app.use(router)

app.use(ElementPlus)
app.mount('#app')

• import SvgIcon from '@/icons'：导入了一个名为 SvgIcon 的插件，该插件用于注册全局的 SVG 图标组件。

• const app = createApp(App)：创建了一个 Vue 应用实例，使用 createApp 函数传入根组件 App。

• SvgIcon(app)：将 app 作为参数传递给 SvgIcon 插件函数，用于在应用中注册全局的 SVG 图标组件。

6.使用语法

<el-form-item prop="username">

  <el-input

      type="text"
      size="large"
      auto-complete="off"
      placeholder="账号"
  >
  <template #prefix><svg-icon icon="user" /></template>
  </el-input>
</el-form-item>