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
。文章来源:https://www.toymoban.com/news/detail-541217.html -
SvgIcon(app)
:将app
作为参数传递给SvgIcon
插件函数,用于在应用中注册全局的 SVG 图标组件。文章来源地址https://www.toymoban.com/news/detail-541217.html
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>
到了这里,关于【VUE学习】权限管理系统前端vue实现4-自定义icon实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!