vue-cli使用svg

最新推荐文章于 2023-05-06 16:37:29 发布
最新推荐文章于 2023-05-06 16:37:29 发布
阅读量177 收藏
点赞数
分类专栏： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41445581/article/details/101282953
版权

1.在对应的vue项目安装插件

vue add svg-sprite

2.安装 svgo-loader

npm install svgo svgo-loader --save-dev

3在main.js里面注册SvgIcon组件

//引入svg组件
import SvgIcon from '@/components/SvgIcon.vue'    

//全局注册icon-svg
Vue.component('SvgIcon', SvgIcon)

4.再在assets下创建icons文件夹，将所有的svg图标放进去，name就是svg的名字，例如

<svg-icon name="money"></svg-icon>
红色可可
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3中使用svg
qq_37915717的博客
03-30 353
vue-cli3中使用svg 打开vue ui 安装 vue-cli-plugin-svg-sprite 然后会自动安装 svgo svgo-loader vue-cli-plugin-svg-sprite 然后再vue.config.js 配置 //svg配置 chainWebpack: config => { config.module .rule('svg-sprite') .use('svgo-loader') .loader('
vue-cli中使用svg
qq_42089654的博客
04-16 648
前言：普通使用图标字体的方式，都是直接导出字体文件，这种方式每次增加图标都需要重新导出。vue中提供的一种loader（svg-sprite-loader）可以让我们更方便的管理svg图标。 1.安装svg-sprite-loader npm install svg-sprite-loader --save-dev 2.根目录下创建vue.config.js文件 vue.config.j...
vue-cli构建的项目中使用svg图标
qq_41348029的博客
11-08 543
参考：https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/ 参考：https://cisy.me/webpack-svg-sprite/ 1、安装插件： npm i -S svg-sprite-loader 2、更改build/webpack.base.conf.js配置文件      ...
vue-cli3使用svg图标的详细步骤
qq_43248623的博客
04-08 1380
1.安装依赖 npm install svg-sprite-loader -D 2.在vue.config.js里添加配置 module.exports={ chainWebpack: config => { const svgRule = config.module.rule("svg"); svgRule.uses.clear(); svgRule .use("svg-sprite-
vue 引入svg
weixin_44753443的博客
06-27 140
vue 引入svg
VUE-cli3使用 svg-sprite-loader
10-17
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，这篇文章主要介绍了VUE-cli3使用 svg-sprite-loader,需要的朋友可以参考下
vue-cli-plugin-svg-sprite:vue-cli 3插件来构建SVG Sprite
04-29
vue-cli-plugin-svg-sprite vue-cli 3插件，可使用构建SVG Sprite。 安装 vue add svg-sprite 用法 使用生成器提供的，或查看以了解其他/高级用法。 注意：此插件仅将加载程序添加到Webpack配置中，不会使您的目录...
vue-cli3中配置alias和打包加hash值操作
10-14
在 Vue CLI 3 的示例中，对于图片、音频、视频和字体文件的配置，我们使用了 `hash` 来确保当这些静态资源改变时，它们的 URL 也会随之更新： ```javascript { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: '...
vue-cli3-template:基于 vue-cli 搭建的前端模板
05-27
基于 vue-cli3 搭建的前端模板，fork 或 clone 本仓库(持续更新中...) :bellhop_bell: 不建议用此作为项目的基础模板 :rocket: 结合 vue-cli3 的 preset 搭建基于 git repo 的前端项目模板，可以移步 特性 CSS 预...
vue使用svg图标（从0开始）
凉酱的博客
11-30 948
用的element以及antd图标种类都比较少，不够实用，学别人引用svg的图标库 一、引入svg准备 安装依赖npm install svg-sprite-loader --save-dev 配置build文件夹中的webpack.base.conf.js 添加1：exclude: [resolve('src/icons')], 添加2： { test: /\.svg$/, loader: 'svg-sprite-loader', include: [r
将SVG文件转换为VueSFC支持热重载和SVGO
08-09
将SVG文件转换为Vue SFC（支持热重载和SVGO）
Vue项目中操作svg文件
bienaohaoma的博客
11-05 2764
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明： svg-sprite-loader sprites 会被自动渲染和注入页面，您只需通过<svg><use xlink:href="#id"></use></svg> 工作原理是:...
在vue中使用svg图标
hsCBY的博客
11-06 694
以下为傻瓜式教程，亲测有效，不行请联系博主 首先： 下载 svg-sprite-loader 命令：npm i svg-sprite-loader -S 其次 配置vue.config.js ( vue-cli3 )这里只讲vue-cli3的配置 //这里注意路径问题,跟后面创建的文件位置有关 const path = require('path') function resolve (dir) ...
vue中使用svg类型图标
只如初见0706的博客
03-10 5486
1、第一步：安装解析svg类型图标的依赖库 npm install svg-sprite-loader --save-dev 2、配置vue.config.js文件，代码如下 chainWebpack(config) { // set svg-sprite-loader config.module .rule('svg')...
svg/svgo
的博客
09-27 242
Installation $ [sudo] npm install -g svgo Usage CLI Usage: svgo [OPTIONS] [ARGS] Options: -h, --help : Help -v, --version : Version -i INPUT, --input=INPUT : Input file, “-” for STDIN -s STRING, --string=STRING : Input SVG data string -f FOLDER, --folder=F
Vue2中使用SVG并注册全局组件
最新发布
weixin_49993071的博客
05-06 449
完成上述所有后, 根据自己的需求在所需组件中引入SvgIcon.vue并配置, 启动项目, 即可。封装SVG组件, 需要引入 icons 文件夹下的 index.js。, 可添加一条命令并执行, 可查看定义的文件夹下的SVG图片信息。ps: 我的 icons 文件夹 定义在 src 文件夹下。在封装完成后, 前往 main.js 注册为全局组件。前往 vue.config.js 配置SVG。打开 icons/index.js 并写入。为svg文件夹,里面存放SVG图片。package.json 的版本。
vue cli3配置使用svg （记录踩过的坑）
weixin_45295262的博客
12-18 2206
SVG简单理解svg简单理解svg 图标组成元素svg 和 直接引入图标(iconfont下载图标引入方式)的优缺点vue cli3 项目使用svg步骤（想直接学会用的点这里）总结简单理解svg简单理解svg图标优缺点比较vue cli3 项目使用svg步骤总结 简单理解svg 简单理解svg 图标组成元素 svg 和 直接引入图标(iconfont下载图标引入方式)的优缺点 vue cli3 项目使用svg步骤（想直接学会用的点这里） 总结 简单理解svg SVG 指可伸缩矢量图形 (Scalable V
vue项目使用svg文件
qq_30167299的博客
06-08 1万+
vue项目使用svg文件，本地svg文件导入
在 Vue 中使用 svg
热门推荐
MFWSCQ的博客
03-08 2万+
在vue中使用 svg 有两种方式： 1、使用本地的svg 2、把本地的 svg 上传到 iconfont中，统一去色生成 symbol 格式的文件引入 一、要使用 svg 先安装对应的 loader npm install svg-sprite-loader 然后在 vue.config.js 里面对 .svg 结尾的文件使用对应的 loader module.exports = { /* svg 相关配置 */ chainWebpack: config => {
vue-cli3项目搭建与优化全攻略
4. 使用 `svg-sprite-loader` 插件处理 SVG 文件，需通过 `npm install svg-sprite-loader --save-dev` 添加依赖 5. 更新 `vue.config.js` 配置文件，引入 `svg-sprite-loader` 并配置规则，以便在项目中正确解析 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值