介绍
Vue3 和Vue cli4脚手架使用svg图像文件
# Vue3和脚手架Vue cil4导入svg
- 这个记录是面向于Vue3脚手架和Vue cil4的 要看好是否符合再食用
- 建议和记录的路径保持一致 要么你就自己注意路径的设置 你需要注意
svg文件路径
和svg组件路径
首先 你需要创建一个svg文件夹 来存放你的svg
- 路径:
src\assets\svg
第一步 下载svg加载插件
npm install svg-sprite-loader
第二步 配置 vue.config.js文件
vue.config.js
文件在根路径注意: 一定要看好 自己脚手架版本 我记录的是Vue cil4版本 下面记录的所有内容都需要copy上去 注意svg文件的路径
注意: 但凡是修改了
vue.config.js
文件 你都要重新启动项目
const path = require('path')
module.exports = {
// Vue3导入Svg
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.include.add(path.resolve(__dirname, './src/assets/svg')) // svg文件路径 (可以替换成自己的 不要使用@因为是根路径)
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.test(/\.svg$/)
.exclude.add(path.resolve(__dirname, './src/assets/svg')) // svg文件路径 (需要和上面保持一致)
.end()
.use('file-loader')
.loader('file-loader')
}
}
第三步 配置一个svg的组件用来调用svg
- 路径:
src\components\SvgIcon\index.vue
- 我建议在
components
中创建SvgIcon
来调用svg
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
import { computed } from '@vue/reactivity'
/**
* icon-svg 组件(展示所有的svg)
*/
export default {
name: 'BaseSvgIcon',
props: {
// eslint-disable-next-line vue/require-default-prop
iconClass: { type: String },
// eslint-disable-next-line vue/require-default-prop
className: { type: String }
},
setup (props) {
const iconName = computed(() => {
return props.iconClass ? `#icon-${props.iconClass}` : '#icon'
})
const svgClass = computed(() => {
return props.className ? 'svg-icon ' + props.className : 'svg-icon'
})
return { iconName, svgClass }
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第四步 在main.js入口文件全局注册
- 路径:
src\main.js
- 这里使用Vue3注册全局组件的方法 本质上svg展示就是一个全局组件挂载在任意页面上
<SvgIcon>
是组件标签
// 导入SvgIcon组件
import SvgIcon from '@/components/SvgIcon/index.vue' // 这是组件路径
const req = require.context('@/assets/svg', false, /\.svg$/) // 这是svg文件路径
req.keys().map(req)
// 设置Vue3的全局方法实例
// 代替Vue2的 Vue.use的全局方法
const app = createApp(App)
// 创建全局组件,以便任何地方使用
app.component('SvgIcon', SvgIcon)
第五步 在Vue中使用svg
- 我们上一步已经把svg组件注册成了全局组件 所以不需要调用 直接写注册的标签即可
icon-class
就是你svg文件夹的svg名称 使用方式:<SvgIcon icon-class="svg名字" />
<div class="text-content">
<SvgIcon icon-class="github" />
<SvgIcon icon-class="zhihu" />
</div>