Vue3中使用svg

Vue3中使用svg
1)安装插件

npm install svg-sprite-loader --save-dev
2)封装svgIcon组件

在componemts里新建svgIcon文件夹,新建index.vue,封装成组件

3)在src下新建icons文件夹,此文件夹下新建svg文件夹。其中svg文件夹存放所有的svg文件
在这里插入图片描述
在这里插入图片描述

4)在icons下新建index.js,由于配置svg

import Vue from ‘vue’
import SvgIcon from ‘@/components/svgIcon’

Vue.component(‘svg-icon’, SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context(’./svg’, false, /.svg$/)
requireAll(req)
5)在svg文件夹下新建user.svg。打开阿里图标仓库,找一个用户的图标的svg并复制,粘贴到user.svg中

6)在vue.config.js添加下面的内容

const path = require(‘path’)

function resolve(dir) {
return path.join(__dirname, ‘.’, dir)
}

module.exports = {
chainWebpack: config => {
config.module.rules.delete(“svg”); //重点:删除默认配置中处理svg,
config.module
.rule(‘svg-sprite-loader’)
.test(/.svg$/)
.include
.add(resolve(‘src/icons’)) //处理svg目录
.end()
.use(‘svg-sprite-loader’)
.loader(‘svg-sprite-loader’)
.options({
symbolId: ‘icon-[name]’
})
},
}
7)在main.js里引入

import ‘./icons’
8)在页面中使用

svg图标
其中icon-class指定的是svg文件的名字。查看页面如下:
在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue3使用SVG矢量图,你可以按照以下步骤进行操作: 1. 在`main.js`或`main.ts`文件,引入`vite-plugin-svg-icons`插件并注册全局的SVG图标组件。你可以使用以下代码: ```javascript import 'vite-plugin-svg-icons/register'; import svgIcon from './components/SvgIcon.vue'; app.component('svg-icon', svgIcon); ``` 这样就可以在整个应用程序使用`<svg-icon>`组件了。\[1\] 2. 在`src/components`目录下创建一个名为`SvgIcon.vue`的组件文件,并添加以下代码: ```vue <template> <svg :class="svgClass" aria-hidden="true" v-bind="$attrs" v-on="$listeners"> <use :xlink:href="iconName"/> </svg> </template> <script> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true, }, className: { type: String, default: '', }, }, computed: { iconName() { return `#icon-${this.iconClass}`; }, svgClass() { if (this.className) { return `svg-icon ${this.className}`; } return 'svg-icon'; }, }, }; </script> <style scoped> .svg-icon { width: 10em; height: 10em; fill: currentColor; overflow: hidden; } </style> ``` 这个组件将接受一个`iconClass`属性,用于指定要显示的SVG图标的类名。你可以在模板使用`<svg-icon>`标签,并通过`icon-class`属性传递类名,如下所示: ```vue <svg-icon icon-class="book" class="w-14 h-14 mr-4 text-primary"></svg-icon> ``` 这样就可以在Vue3 + Vite使用SVG矢量图了。\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [vue使用svg矢量图](https://blog.csdn.net/qq_44376306/article/details/123497667)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值