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

男娘i 2024-04-20 22:09 65阅读 0赞

## 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>