nuxt 自动导入svg不显示（svg-sprite-loader）

最新推荐文章于 2024-05-13 16:19:57 发布
最新推荐文章于 2024-05-13 16:19:57 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： web 踩坑大全 文章标签： svg icons
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45925443/article/details/114397644
版权

记录下一个小问题 nuxt 自动导入svg不显示

  • 一开始用的是svg-sprite-loader打包svg图片，然而在nuxt.config.js中配置后一直没有效果，并不会生成下图这个玩意
    正常打包后的结果
  • 经过我一番搜索，还是没有找到解决方法，直到我百度给我推了个这个东西（下图），让我突然感觉到了希望，这个loader网址：点这
    在这里插入图片描述
  • 然后安装：
	npm install nuxt-svg-sprite-loader
  • 配置nuxt.config.js 的modules:
	modules: [
最低0.47元/天 解锁文章
是我胡汉三啊
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nuxt项目引入svg
u010426490的专栏
06-16 426
nuxt.js项目引入svg
Nuxtjs 项目使用 svg-sprite-loader 更改 svg 的颜色
老司机的后备箱
10-24 1386
由于一些原因，最新的公司项目要使用的技术切换到了Nuxt.js，也就是Vue的 ssr 服务端渲染框架。使用会让你的svg引入写起来非常的舒服，可以随意修改其颜色，就是配置起来稍稍麻烦一点。但对比开发体验来说，这点时间花费，是完全值得的！为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
nuxt-svg-sprite-loader:用于svg-sprite-loader的Nuxt.js模块
03-17
nuxt-svg-sprite-loader 用于svg-sprite-loader的Nuxt.js模块。 安装 # npm $ npm install nuxt-svg-sprite-loader # Yarn $ yarn add nuxt-svg-sprite-loader 用法 该模块添加到您Nuxt.js模块列表nuxt.config.js ： export default { ... modules : [ 'nuxt-svg-sprite-loader' ] } 在页面中使用SVG： < template> < svg >< use xss=removed></ use></ svg > </ template> < script > import Logo from ' @/
关于Nuxt3使用svg
最新发布
qq_37225650的博客
05-13 290
3、plugin引入 virtual:svg-icons-register，然后nuxt plugin配一下就行。自定义不管是大小颜色都比官方module那个好用太多。安装vite-plugin-svg-icons。官方的不好用，还是用vite自己自定义的好用。1、自定义svg组件。
app自定义图标 vue_Nuxt JS 使用 svg-sprite-loader 和 自定义 VUE组件 处理svg图标
weixin_35182625的博客
01-02 283
原文发布于我的个人博客Nuxt JS 使用 svg-sprite-loader 和 自定义 VUE组件 来处理svg图标icon​www.hoody.vip使用 `svg-sprite-loader` 和 自定义 VUE组件 来处理svg图标icon1.安装svg-sprite-loadernpm install svg-sprite-loader -D2.配置文件nuxt.config.js添加...
nuxt中使用svg
qq_41200374的博客
05-23 1422
环境 "nuxt": "^2.15.7", "nuxt-svg-sprite-loader": "^2.0.9", 准备工作 一、安装svg-sprite-loader插件 npm install svg-sprite-loader -D 二、创建SVG组件文件 <template> <svg :class="['svg-icon', svgClass]" :style="svgStyle" aria-hidden="true"> <use :xlink
nuxt-svg-sprite-module:在Nuxt应用程序中内嵌svg精灵的快速而肮脏的方法
05-14
nuxt-svg-sprite-module 在Nuxt应用程序中内嵌svg精灵的一种快速而肮脏的方法。 安装 $ yarn add nuxt-svg-sprite-module $ npm install nuxt-svg-sprite-module --save 配置 在nuxt.config.js modules: [ [ "nuxt-svg-sprite-module" , { directory : "~/assets/icons" , // Optional template location: defaults to __dirname + /app.html templateLocation : "src/app.html" , options : { // Configuration o
nuxt-svg-loader:SVG作为组件，也在服务器端！
05-13
设置使用yarn或npm将nuxt-svg-loader添加为依赖项到您的项目添加nuxt-svg-loader到modules的部分nuxt.config.js{ modules : [ 'nuxt-svg-loader' , ]} 现在，您可以像常规Vue组件一样使用svg文件您还可以通过在文件...
vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载
05-13
npm install vite-svg-loader --save-dev 设置 vite.config.js import svgLoader from 'vite-svg-loader' export default { plugins : [ vue ( ) , svgLoader ( ) ] } 与TypeScript一起使用 如果在Typescript项目...
nuxt-sass-resources-loader：用于NuxtJ的SASS资源（例如变量，mixins等）模块
02-05
// nuxt-sass-resorces-loader export default { modules : [ 'nuxt-sass-resources-loader' ] , // your settings here sassResources : [ '@/path/to/first-resources.sass' ] } // @nuxtjs /style-re
nuxt中使用svg 开发svg组件
web_ding的博客
08-24 894
为什么要使用SVG 虽然我们在日常开发的时候，在使用iview 或者element ui等组件时，通常会包含一些常用icon；但是在面对一些特定的需求时，或者自己想high一下，这些通用的icon并不能很好的满足我们。这个时候我们可能会拿到一些SVG适量图，但是怎么去使用这些矢量图呢。 项目目录 这里以基于Nuxtjs的开发为例： 要使用SVG矢量图，在这里会使用到上述匡出来的文件。 其中在asserts中放置一些图片资源（个人习惯）如图所示： 在compo...
nuxt开发笔记
全栈小菜鸡
04-07 764
nuxt项目开发nuxt 项目开发新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 nuxt 项目开发 感觉东西...
d3 svg path添加文本_Nuxt JS 使用 svg-sprite-loader 和 自定义 VUE组件 处理svg图标
weixin_39766258的博客
11-25 247
原文发布于我的个人博客Nuxt JS 使用 svg-sprite-loader 和 自定义 VUE组件 来处理svg图标icon​www.hoody.vip使用 `svg-sprite-loader` 和 自定义 VUE组件 来处理svg图标icon1.安装svg-sprite-loadernpm install svg-sprite-loader -D2.配置文件nuxt.config.js添加...
webpack 插件 svg-sprite-loader
热门推荐
zb0567的专栏
09-15 1万+
最近开始看 Vue 了，首先用官方的模版把项目快速搭建起来： Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 现在的项目 webpack 几乎是标配了，各种插件好用到爆。现在我们要接触的是一个叫 svg-sprite
如何在Nuxt.js中使用svg图标？以及nuxt.js与vue.js使用svg图标的区别
你好，PurePeace！
09-04 3112
首先介绍一下Nuxt.js：Nuxt.js是一个基于 Vue.js的轻量级框架，可用来创建服务端渲染 (SSR) 应用，也可用于生成静态站点。 官网：https://nuxtjs.org/ 使用Nuxt.js进行服务端渲染更利于SEO，这是我使用Nuxt.js的最大理由。 但是Nuxt.js的项目结构以及一些配置写法与我平常编写的vue-cli项目还是存在不少区别，所以写下这篇文章记录下在Nuxt.js中使用svg图标的过程。 首先，在nuxt中使用svg总共分为三步： 1.创建vue组件 首先在nuxt
nuxt 引入iconfont多色图标
JQG的博客
08-08 4597
symbol引用 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点： 支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 浏览器渲染svg的性能一般，还不如png。 使用步骤...
Nuxt 2 即将来临
大转转FE
04-09 578
原文出处： 
未来必热：SVG Sprite技术介绍
hsany330的专栏
11-12 1105
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=4264 一、Sprite技术 这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。 另，本文图片甚多，爪机党继续浏览需慎重。
img引入svg不显示
05-18
如果您在使用 img 标签引入 SVG 图片时遇到了显示问题，可能是因为 img 标签默认会将 SVG 图片当作普通图像处理，而不是矢量图像。您可以尝试以下几种方法来解决这个问题： 1. 使用 object 标签引入 SVG 图片。 ```html <object type="image/svg+xml" data="your-svg-image.svg"></object> ``` 2. 直接在 HTML 文件中嵌入 SVG 代码。 ```html <svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" /> </svg> ``` 3. 在 CSS 样式中将 img 标签的 display 属性设置为 inline-block。 ```css img { display: inline-block; } ``` 4. 将 SVG 图片转换为 base64 编码，并使用 data URI 引入。 ```html <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxzd... ``` 其中，第二种方法是最简单的解决方案，但是会增加 HTML 文件的大小。第一种方法可以完全保留 SVG 图像的矢量特性，并且可以通过 JavaScript 操作 SVG 内容。第三种方法只是一种 Hack，可能会影响到其他的图片布局。第四种方法也可以保留 SVG 图像的矢量特性，但是需要将 SVG 转换为 base64 编码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值