vue3 导入svg图片

1 安装

"svg-sprite-loader": "^6.0.9"

2 在src文件下创建一个icons文件夹放入svg文件图片(阿里图标库) 并且配置一个index.js文件

import SvgIcon from '@/components/SvgIcon'// https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 通过 require.context() 函数来创建自己的 context
const svgRequire = require.context('./svg', false, /\.svg$/)
// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标
// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
svgRequire.keys().forEach((svgIcon) => svgRequire(svgIcon))export default (app) => {app.component('SvgIcon', SvgIcon)
}

3 在 components里面配置一个文件SvgIcon index.vue

<template><divv-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>

4 在utils文件中添加一个validate.js文件

/*** 判断是否为外部资源* @param {*} path*/
export function isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)
}

5 在main.js里面设置

import installIcons from './icons'
installIcons(App)

6 在vue.config.js文件中配置

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {return path.join(__dirname, dir)
}
module.exports = defineConfig({transpileDependencies: true,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()}
})

7 在页面中就可以进行使用标签了

<template><div><span class="svg-container"><SvgIcon icon="gun" /><SvgIcon icon="chart" /></span></div>
</template><script>
import SvgIcon from './components/SvgIcon/index.vue'export default {name: 'App',components: {SvgIcon}
}
</script><style scoped></style>

vue3 导入svg图片相关推荐

二十一、如何导入svg图片
svg就相当于字体,如何将生成的svg导入到自己的项目中去呢? 1.将类似下面的文件放入自己的项目中: 2.生成的svg中有一个style.css文件,将里面的内容拷贝到你的css中,然后更改上图的路 ...
AndroidStudio导入SVG图片
drawable下点击New 选择Vector Assert 之后会在该目录下来生成对应的xml文件然后在src同样使用
android studio 插入SVG图片
1.在res中右键导入svg图片,设置文件名,将图片保存在drawable文件中. 2.在ImageView中插入图片路径. <ImageViewandroid:id="@+id/im ...
【解决方案】LaTeX插入svg图片
LaTeX插入svg图片的解决方案今天在写论文时,想在论文里插入svg图片,遇到了问题,百度了一下方法,发现LaTeX不支持插入svg图片,在捣鼓了一下之后,发现基本的方法不是失效就是比较麻烦,本文 ...
vue3如何使用svg图片
1.下载loader npm install --save-dev svg-sprite-loader,svgo,svgo-loader 2.在vue.config.js中配置 const path ...
vue引入svg图片
一.很早之前做项目有使用到svg图片,一直没有记录,后来在百度发现没一个能用的,索性自己整理归纳一个二.步骤 1.安装 svg-sprite-loader npm install --save s ...
vue项目使用svg图片
(svg-sprite-loader以及vue2-svg-icon的使用) 第一种方式: 1.安装svg-sprite-loader npm install svg-sprite-lo ...
android支持svg格式图片么,Android Studio2.0中使用SVG图片格式
SVG格式, 适应屏幕, 图片较小, 还有很多优点 . 本文讲解如何使用SVG格式. SVG: Scalable Vector Graphics, 可缩放矢量图形. IRI: Internationa ...
vue中使用svg图片
1.安装依赖包 svg-sprite-loader npm install svg-sprite-loader --save-dev 2.配置svg图片使用svg-sprite-loader来编译-- ...

vue3 导入svg图片

vue3 导入svg图片相关推荐

最新文章

热门文章