svg配置与less在vue中使用

最新推荐文章于 2021-10-31 18:48:38 发布
最新推荐文章于 2021-10-31 18:48:38 发布
阅读量653 收藏
点赞数
分类专栏： svg less 文章标签： svg less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45614485/article/details/107558853
版权
svg 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
less
1 篇文章 0 订阅
订阅专栏

svg配置与less在vue中使用

一. svg配置

1.1 导入svg图片
1.2 使用使用SVG symbols建立图标系统
1.3 我的用法
  • 用symbols建立图标系统用在vue组件上
  • 然后在app的vue中全局导入(像组件一样导入)

二. 在vue中引入less

2.1 安装less
  • npm install less less-loader --save-dev
2.2 配置语言模式
  • 把右下角(VScode)改为vue
2.3 直接使用就可以了
叻仔猪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中如何引入自动引入所有svg图标
口袋的天空的博客
04-20 2498
一.前提 1.要使用 svg 先安装对应的 loader npm install svg-sprite-loader 注意： 如果按照下面配置正确发现svg依然无法显示可能s’v’g-sprite-loader的版本过高，重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的) 2.webpack.base.conf.js修改 { test: /\.svg$/, load
umijs中如何引用svg图片
菜鸟博客
04-09 3945
最近遇到需求在umijs中引用svg图片。下面说说实现方法。 先看效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQn5hMt3-1586361572751)(https://store.xuehuayu.cn/store/20200408/2020-04-08_215349.png)] 分析 查看umijs文档中，使用ReactComponent来引用sv...
在vue项目中配置使用svg
ngd-b的博客
09-16 985
常使用svg作为图标使用已经很常见了,以下为几种使用方式 .
less的使用
qq_58777190的博客
10-31 595
一、less的简单的用法 首先在vscod里面安装一个Easy LESS的插件，在
最简单的SVG图标使用方式
Dreamy_LIN的博客
05-19 6808
简介 Icon Sprite ：CSS精灵或雪碧图，是一种网页图片应用处理方式。原理是，把网页中一些Icon整合到一张图片文件中。再通过一定方式从图片文件中取出所需Icon并显示。其中CSS Sprite、Icon Font使用最多。 CSS Sprite： 原理是将多个icon按一定规律整合到图片文件中，再利用CSS的"background-image"，“background-repeat”，"background-position"的组合进行图片定位并显示。优点：技术成熟，兼容性好；缺点：在实际需求中
Less的几种使用方法
01-07
在Vue中使用Less 1、安装依赖 处理普通的.css 文件， 需要安装css-loader,style-loader 　　　　.less 文件， 需要安装 less-loader npminstall css-loader style-loader –save-dev npminstall less-loader –save-dev 2、安装好相关loader后，我们需要在webpack.base.conf.js或者webpack.config.js 中加入相关配置代码，如下 { test: /.(woff2?|eot|ttf|otf)(?.*)?KaTeX parse
解决Vue2.0中使用less给元素添加背景图片出现的问题
11-30
在Vue 2.0项目中，使用Less进行样式编写...遵循这些规则，可以避免在Vue 2.0项目中使用Less时遇到背景图片加载失败或编译错误的问题。通过熟练掌握Less的变量和URL引用规则，能够更高效地编写和维护Vue项目的样式代码。
【JavaScript源代码】Vue中引入svg图标的两种方式.docx
12-30
现在，你可以在Vue组件中使用这些SVG组件： ```html <SvgIcon svg-name="ic_home_news" /> ``` 这两种方法都可以有效地在Vue项目中引入SVG图标，并且可以根据项目需求和个人偏好选择合适的方法。使用SVG图标不仅...
vue 在线答题卡制作
02-26
在本文中，我们将深入探讨如何使用Vue.js框架来创建一个在线答题卡系统。Vue.js是一个轻量级的JavaScript库，以其易学性、灵活性和组件化特性而受到开发者喜爱。在"vue在线答题卡制作"项目中，我们将利用Vue的核心...
详解使用jest对vue项目进行单元测试
12-01
首先，我们要了解为什么进行单元测试以及Vue与Jest结合的优势。Vue CLI 3.0提供了对单元测试的强大支持，尤其是对于TypeScript编写的项目，需要集成ts-jest。 在开始编写测试之前，我们需要配置Jest。在`package....
引用stylus文件，stylus文件中再引用.svg的问题
Vivi4478的博客
11-28 1420
文件结构 我在header.vue文件中用相对路径引入了icon.styl文件   @import "../../common/stylus/icon.styl"; 又在icon.styl文件中用相对路径引入了sell-icon.svg等文件 @font-face {   font-family: 'sell-icon';   src:  url(‘../fon
vue引入图片路径的三种主要方法
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-16 2万+
1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）3、正常引入静态图片路径情况一，在html里面的用下面代码情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/
Vue项目中使用svg文件
weixin_30536513的博客
03-19 690
使用第三方插件vue-svg-icon npm i vue-svg-icon -D 在入口文件main.js引入 import Vue from from 'vue' import Icon from 'vue-svg-icon/Icon.vue' //引入 Vue.component('icon', Icon) //注册 　　 将svg文件放到 s...
Vue-cli项目中使用stylus、scss、less、axios、代理、环境变量、svg
super苹果核的博客
08-26 434
vue中使用stylus npm i stylus -S npm i stylus-loader -S vue中使用scss npm i node-sass -S npm i sass-loader -S vue中使用less vue-cli构建的项目默认不支持less，需要手动配置 //安装项目依赖 npm i less less-loader -S //配置webpack module...
svg用作背景图
u011927449的博客
11-05 8663
svg用做背景图的几种方式 1. 直接使用 background: url('data:image/svg+xml;charset=utf-8,<svg width="10" height="10" ...
Vue中引入svg图标的方式
十里不故梦
01-12 3839
Vue中引入svg图标的方式 Vue中引入svg图标的方式一 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> &l
20150812 SVG实现Tooltip气泡效果+LESS+BOWER
Hey_Sarah
08-17 1163
使用Chrome调试样式（CSS和LESS） 添加工作目录、建立文件映射(Map to)、编辑CSS文件或者使用样式面板修改样式、保存样式 F12+Sources+右键+Add folder to workspace+选择+允许+文件+右键+Map to network  resource. F12+Sources+文件+右键+Map to file system resource
svg嵌入到html中的几种方式
ailw92114的博客
05-14 1005
最简单的方式好像就是用img，自己暂时不知道这种方式有什么缺陷，欢迎广大网友指正： <img src="ask.svg"/>` 剩下几种方式主要是在各个博客网站之流学习的： 使用<embed> 标签 <embed> 标签被所有主流的浏览器支持，并允许使用脚本。 注释：当在 HTML 页面中嵌入 SVG 时使用 <em...
svg图标在vue中的使用
最新发布
05-12
在Vue中使用SVG图标，可以采用以下两种方法： 1. 使用svg-sprite-loader插件 安装svg-sprite-loader插件： ``` npm install svg-sprite-loader --save-dev ``` 在webpack配置文件中，添加以下代码： ```javascript module: { rules: [ { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId: 'icon-[name]' } } ] } ``` 在项目中创建一个icons目录，将所有的svg图标文件放入该目录下，然后在需要使用图标的地方引入： ```vue <template> <div> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-home"></use> </svg> </div> </template> <script> export default { name: 'MyComponent' } </script> <style> @import '../icons/iconfont.css'; </style> ``` 2. 使用vue-svg-icon组件 安装vue-svg-icon组件： ``` npm install vue-svg-icon --save ``` 在项目中创建一个icons目录，将所有的svg图标文件放入该目录下，然后在需要使用图标的地方引入： ```vue <template> <div> <vue-svg-icon name="home" /> </div> </template> <script> import VueSvgIcon from 'vue-svg-icon' export default { name: 'MyComponent', components: { VueSvgIcon } } </script> <style> @import '../icons/iconfont.css'; </style> ``` 以上两种方法都可以实现在Vue中使用SVG图标，具体使用哪种方法取决于个人喜好和项目需要。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值