vue2+webpack/vue3+vite 封装svg组件总结笔记

一、vue2+webpack

1.npm安装依赖包

npm i svg-sprite-loader

package.json

"svg-sprite-loader": "^5.0.0"

main.js

import { registerSvgIconComp } from '@/plugins/registerSvgIcon'
registerSvgIconComp(app)

vue.config.js文件

module.exports = {publicPath: '/',// 打包输出outputDir: 'dist',
// 链式webpack配置chainWebpack: config => {// 设置 svg-sprite-loaderconfig.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({symbolId: 'icon-[name]'}).end()},}

2.组件封装

/plugins/registerSvgIcon.js

// svg-icon
import SvgIcon from '@/components/SvgIcon'const req = require.context('@/icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)export function registerSvgIconComp(app) {app.component('SvgIcon', SvgIcon)
}

/components/SvgIcon

<template><view v-if="isExternalIcon" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-bind="$attrs"></view><svg v-else :class="svgClass" aria-hidden="true" v-bind="$attrs"><use :xlink:href="iconName" /></svg>
</template><script>
import { isExternal } from '@/utils/validate'
import { computed } from 'vue'export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true,},className: {type: String,default: '',},},setup(props) {console.log('props.iconClass :>> ', props.iconClass)console.log('props.className', props.className)const isExternalIcon = computed(() => isExternal(props.iconClass))const iconName = computed(() => `#icon-${props.iconClass}`)const svgClass = computed(() => {if (props.className) {return 'svg-icon ' + props.className} else {return 'svg-icon'}})const styleExternalIcon = computed(() => {return {mask: `url(${props.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`,}})return {isExternalIcon,iconName,svgClass,styleExternalIcon,}},
}
</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>

3.组件调用

 <div><svg-icon icon-class="ic-tips" /> &nbsp;验证码</div>

二、vue3+vite

1.npm安装依赖包(这是npm截止笔记时间最新包，我用的不是最新的)

npm i vite-plugin-svg-icons@0.6.0-beta.1

package.json

"vite-plugin-svg-icons": "^2.0.1"

2.main.js配置

// svg-icon
import 'vite-plugin-svg-icons/register'// 看哪个管用
// import 'virtual:svg-icons-register' // 看哪个管用
//组件全局调用
import { registerSvgIconComp } from '@/plugins/registerSvgIcon'registerSvgIconComp(app)

3.组件封装

/plugins/registerSvgIcon.js

// svg-icon
import SvgIcon from '@/components/SvgIcon'const files = import.meta.globEager('../static/icons/svg/*.svg') // viteconst modules = {}const requireAll = (files) => {for (const key in files) {if (Object.prototype.hasOwnProperty.call(files, key)) {modules[key.replace(/(\.\/|\.svg)/g, '')] = files[key].default}}
}
requireAll(files)export function registerSvgIconComp(app) {app.component('SvgIcon', SvgIcon)
}

/components/SvgIcon.vue

<template><view v-if="isExternalIcon" :style="styleExternalIcon" class="svg-external-icon svg-icon"></view><svg v-else :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" /></svg>
</template><script>
import { isExternal } from '@/utils/validate'
import { computed } from 'vue'export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true,},className: {type: String,default: '',},},setup(props) {const isExternalIcon = computed(() => isExternal(props.iconClass))const iconName = computed(() => `#icon-${props.iconClass}`)const svgClass = computed(() => {if (props.className) {return 'svg-icon ' + props.className} else {return 'svg-icon'}})const styleExternalIcon = computed(() => {return {mask: `url(${props.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`,}})return {isExternalIcon,iconName,svgClass,styleExternalIcon,}},
}
</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.组件调用

 <div><svg-icon icon-class="ic-tips" /> &nbsp;验证码</div>

注意：uniapp转微信小程序失败：Error: 暂不支持 v-bind=“” 用法
原因就是字面意思，只能老老实实使用props接受父组件传参，一个个再传进去。包括父组件得行内样式style，反正就是不能偷懒。

vue2+webpack/vue3+vite 封装svg组件总结笔记相关推荐

webRtc播放rtsp视频流（vue2、vue3+vite+ts）
一.下载webRtc 开发环境用的win10版本的. github上直接下载,速度感人. Releases · mpromonet/webrtc-streamer · GitHub 提供资源下载,0积 ...
【Vue3】Vue3+Vite前端在组件中直接使用svg图标icon(实现设计稿的icon解决方案)
webpack实现下载icon图标(svg格式) 用到的是腾讯codesign,其他平台也能进行svg图片的下载放入项目 svg中如何控制图标颜色如下图控制svg颜色的是fill参数,此处可以删 ...
vue3+vite配置svg文件的全局使用（想怎么改颜色、宽高都可以）
前言 1.你是否遇到UI给你切双份icon图(正常显示颜色.高亮显示颜色)?我们前端小伙伴还得做交互引入两个图片,以后修改颜色又要换?好麻烦呀~~~ 2.是否遇到有时候下载svg下来,想随意更改颜色遇 ...
vue3 简单封装GoogleMap组件
关于支持vue3的GoogleMap,暂时推荐两种 vue3-google-map vue3 google maps 大家有较好的推荐欢迎交流我这里选用的第二种 npm install -S @fa ...
vue3+TypeScript封装echarts5组件
https://blog.csdn.net/qq_38330707/article/details/111497853 有用mark 等抽时间写个vue+TS+echarts5.0的组件文章写个大概 ...
Vue3封装通用svg组件
我觉得拿自己以前发过的文章应该是不能叫做抄吧! 我之前在iconfont图标库找到了一些比较精美的图标,但是当我兴高采烈的拿着从阿里妈妈图标库去用的时候发现,颜色是黑的,emmmm-,当然颜色是可以修 ...
echarts vue 柱状图实例_「源码学习」适用于 Vue3 的 ECharts 包装组件
距离 Vue3 发布已经有近一周的时间,不知道大家源码都学习的怎么样了呢?今天 Gitee 为开发者们推荐一个新的学习资源,就是下面要介绍的这个同时适用于 Vue2 和 Vue3 的 EChatrts ...
基于vue3的京东nutui组件库的表单校验规则：怎样进行表单验证？怎样只使用指定的某一个规则进行校验呢？
官网: NutUI - 移动端 Vue2.Vue3.小程序组件库京东风格的轻量级移动端 Vue.React 组件库https://nutui.jd.com/#/component/form 用法: ...
Vue2 环境下安装Vue3 ，同一台电脑同时安装vue2 和vue3
目前大多数老的项目还是以vue2.0版本为主,在vue3的环境下vue2的项目又不能运行,因此Vue2 和Vue3两个版本同时存在显得尤为重要,本博客为转发博客,非常详细博客1:https://bl ...