脚本宝典收集整理的这篇文章主要介绍了vue 使用svg,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
webpack 使用插件
npm i --save-dev svg-sprite-loader@6.0.9
const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { 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(); }, };
放置svg
icon/index.js
main.js
import installIcons from '@/icons'; const app = createApp(App); installIcons(app);
<template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" :class="className" /> <svg v-else class="svg-icon" :class="className" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script setup> import { isExternal as external } from '@/utils/validate'; import { defineProps, computed } from 'vue'; const props = defineProps({ // icon 图标 icon: { type: String, required: true, }, // 图标类名 className: { type: String, default: '', }, }); /** * 判断是否为外部图标 */ 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 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>
使用
以上是脚本宝典为你收集整理的vue 使用svg全部内容,希望文章能够帮你解决vue 使用svg所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。