vue处理svg

vue处理svg

vue处理svg目录

Vue 可以通过使用内置的 `vue-svg-loader` 或者 `vue-svg-icon` 库来处理 SVG。

### 使用 vue-svg-loader

`vue-svg-loader`一个 SVG 加载器,可以将 SVG 文件作为 Vue 组件导入并使用。

1. 安装 `vue-svg-loader`:

“`bash

npm install vue-svg-loader –save-dev

“`

2. 在 `vue.config.js` 中配置 SVG 加载器:

“`javascript

module.exports = {

chainWebpack: config => {

const svgRule = config.module.rule(‘svg’);

svgRule.uses.clear();

svgRule

.use(‘vue-svg-loader’)

.loader(‘vue-svg-loader’);

}

}

“`

3. 在 Vue 组件中导入 SVG 文件:

“`vue

import MyIcon from '@/assets/my-icon.svg';

export default {

components: {

MyIcon

}

}

“`

### 使用 vue-svg-icon

`vue-svg-icon`一个基于 `vue-svg-loader` 的库,可以快速地使用 SVG 图标。

1. 安装 `vue-svg-icon`:

“`bash

npm install vue-svg-icon –save

“`

2. 在 Vue 中注册插件:

“`javascript

import Vue from ‘vue’;

import VueSvgIcon from ‘vue-svg-icon’;

Vue.use(VueSvgIcon, {

tagName: ‘icon’

});

“`

3. 在 Vue 组件中使用 SVG 图标:

“`vue

“`

其中,`name` 属性指定了要使用的 SVG 图标的名称,`vue-svg-icon` 会自动加载对应的 SVG 文件并将其作为 Vue 组件使用。”

给TA打赏
共{{data.count}}人
人已打赏
影视后期

pascal 语言

2024-3-30 14:12:20

影视后期

安卓xml反编译工具,如何反编译apk文件得到源码和XML文件

2024-3-30 14:28:32

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
打开微信,扫描左侧二维码,关注【旅游人lvyouren】,发送【101】获取验证码,输入获取到的验证码即可解锁复制功能,解锁之后可复制网站任意一篇文章,验证码每月更新一次。
提交