vue3封装svg图标组件(vite)
·
** 第一种很久了,版本应该已经不对了,会报错了
封装SvgIcon组件目的:
使用本地svg图标、使用线上svg图标
使用示例:
一、新建SvgIcon组件
1.在components下新建SvgIcon文件夹并在SvgIcon文件夹下新建index.vue文件(目录如上图所示:)
<template>
<!-- 展示外部图标 -->
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" :class="className"></div>
<!-- 展示内部图标 -->
<svg v-else class="svg-icon" :class="className" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
// icon 图标
icon: {
type: String,
required: true
},
// 图标类名
className: {
type: String,
default: ''
}
})
/**
* 判断当前图标是否为外部图标
*/
function external(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
const isExternal = computed(() => external(props.icon))
/**
* 外部图标样式
*/
const styleExternalIcon = computed(() => ({
mask: `url(${props.icon}) no-repeat 50% 50%`,
'-webkit-mask': `url(${props.icon}) no-repeat 50% 50%`
}))
/**
* 内部图标
*/
const iconName = computed(() => `#icon-${props.icon}`)
</script>
<style lang="scss" 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>
二、
1.在iconfont上选择需要的icon,选择svg下载(存放目录如上图所示)
2.在src文件夹下新建icons文件,并在icons文件夹下新建svg(用于存放svg)并在icons文件夹下新建index.js用于导入和导出svg
3.在index.js中导入导出svg
import SvgIcon from '@/components/SvgIcon'
// 1. 导入所有的 svg 图标
// require.context 帮助文档:https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 你还可以通过 require.context() 函数来创建自己的 context。
// 可以给这个函数传入三个参数:一个要搜索的目录,一个标记表示是否还搜索其子目录, 以及一个匹配文件的正则表达式。
// 1.1. 此时返回一个 require 的函数,可以接受一个 request 的参数,用于 require 的导入。
const svgRequire = require.context('./svg', false, /\.svg$/)
// 1.2. 该函数提供了三个属性,可以通过 require.keys() 获取到所有的 svg 图标
console.log(svgRequire.keys())
svgRequire.keys().forEach((svgIcon) => {
// 1.3. 遍历图标,把图标作为 request 传入到 require 导入函数中,完成本地 svg 图标的导入
svgRequire(svgIcon)
})
// 2. 完成 SvgIcon 的全局注册
export default (app) => {
app.component('svg-icon', SvgIcon)
}
4.在main.js中导入并传入app参数
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入初始化样式表
import '@/styles/index.scss'
// 导入 svgIcon
import installIcons from '@/icons' // 1.这行
const app = createApp(App)
app.use(ElementPlus)
installIcons(app) // 2.这行
app.use(store)
app.use(router)
app.mount('#app')
5.使用svg-sprite-loader处理svg图标(此时页面不显示图标,需要下载插件然后配置vue.config.js)
npm install --save-dev svg-sprite-loader@6.0.9
vue.config.js增加配置
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
// https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
module.exports = {
chainWebpack(config) {
// 设置 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({
symbolId: 'icon-[name]'
})
.end()
}
}
如有问题,还请指正
最近学习还遇到另一种导入svg的方式
具体如下
1.在src目录下新建以下文件夹及文件:目录如下
将下载好的svg图标放入icons文件夹中保存
src/libs/svg-icon文件内容如下
<template>
<svg aria-hidden="true">
<use :class="fillClass" :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
// 显示的 svg 图标名称(剔除 icon-)
name: {
type: String,
required: true
},
// 直接指定 svg 图标的颜色
color: {
type: String
},
// 通过 tailwind 指定 svg 颜色的类名
fillClass: {
type: String
}
})
// 真实显示的 svg 图标名(拼接 #icon-)
const symbolId = computed(() => `#icon-${props.name}`)
</script>
src/libs/index.js文件内容如下
import svgIcon from './svg-icon/index.vue'
export default {
install (app) {
app.component('m-svg-icon', svgIcon)
}
}
2.在main.js引入src/libs/index并进行注册
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { useREM } from './utils/flexible'
import mLibs from './libs' // ===================这行1
import './styles/index.scss'
// 注册 svg-icons
import 'virtual:svg-icons-register' // ===================这行2(后面安装插件vite-plugin-svg-icons需要用到)
useREM()
createApp(App).use(router).use(mLibs).mount('#app') // =============还有这里的 use(mLibs)3
3.下载插件npm i --save-dev vite-plugin-svg-icons
4.在vite.config.vue文件中使用vite-plugin-svg-icons
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { join } from 'path' // 引入 path ================= 这行 1
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // ==================这行 2
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({ // ========================== 这行 3
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定 symbolId 的格式
symbolId: 'icon-[name]'
})
],
// 指定软链接
resolve: {
alias: {
'@': join(__dirname, '/src')
}
},
server: {
// 代理配置
proxy: {
// 代理所有 /api 的请求
'/api': {
// 代理请求之后的代理地址
target: '',
// 跨域配置
changeOrigin: true
}
}
}
})
使用: .vue文件中直接使用
<m-svg-icon class="" name="hamburger" color="#f46" fillClass="colorClass"></m-svg-icon>
更多推荐
已为社区贡献2条内容
所有评论(0)