首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从我的nuxt js组件的node_modules文件夹中动态加载svg图标?

在nuxt.js中动态加载svg图标可以通过以下步骤实现:

  1. 首先,将svg图标文件放置在nuxt.js项目中的assets/icons目录下,确保svg文件具有唯一的文件名。
  2. 创建一个Vue组件,用于加载和渲染svg图标。在该组件中,使用<template>标签来定义图标的显示方式,使用<script>标签来导入svg图标文件,使用<style>标签来自定义图标的样式。例如,创建一个名为Icon的Vue组件:
代码语言:txt
复制
<template>
  <span class="icon" v-html="icon"></span>
</template>

<script>
import fs from 'fs'

export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    icon() {
      return fs.readFileSync(`~/assets/icons/${this.name}.svg`, 'utf8')
    }
  }
}
</script>

<style scoped>
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

在上述代码中,通过fs.readFileSync方法读取指定的svg文件内容,并将其作为字符串返回给模板渲染。

  1. 在需要使用图标的地方,使用<Icon>组件,并传入图标文件的名称作为name属性。例如:
代码语言:txt
复制
<template>
  <div>
    <Icon name="example-icon" />
  </div>
</template>

<script>
import Icon from '@/components/Icon.vue'

export default {
  components: {
    Icon
  }
}
</script>

在上述代码中,将Icon组件导入,并在需要使用图标的地方使用<Icon>标签,传入name属性并赋予图标文件的名称。

这样,当页面加载时,Icon组件会动态加载并渲染指定名称的svg图标。

需要注意的是,上述代码中的路径~/assets/icons/是相对于项目根目录的路径,根据项目实际情况进行调整。

推荐的腾讯云相关产品和产品介绍链接地址如下:

以上是关于如何从nuxt.js组件的node_modules文件夹中动态加载svg图标的答案,希望能够帮助到您!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

高效地将 TailwindCSS 与 Nuxt 结合使用

但使用 SVG 图标存在一些挑战,例如需要在应用程序目录手动创建和保存 SVG 文件或创建动态加载 SVG 图标组件等。此外,选择要使用正确图标包也可能是一个挑战。...我们可以为网站上显示每个图标选择各种选项, Vue 组件和 React 组件到简单 SVG 文件。 您可以下载所需图标的相关代码段并将其复制并粘贴到您应用程序。...这个优秀包允许您将 Iconify 中选定图标图标加载到 TailwindCSS 作为应用程序中使用类。...,如下所示: 最好部分是您不需要手动创建和保存 SVG 文件或创建动态加载 SVG 图标组件。...概括 在本教程,我们学习了如何Nuxt.js 应用程序安装和配置 TailwindCSS。

59720
  • Iconfont 还是不能上传,如何维护你 Icon?

    使用 iconfont 有很多优势,比如只需要加载一次,全部图标都可以设置字号大小,颜色、透明度等,可以随意变换字体形态,并且图标是矢量,不会随着字体大小变化失真,得益于 iconfont.cn...现在做事情 所在公司目前正在建设低代码平台,这个低代码平台可以说是无代码,需要从原先各个应用抽取部分页面和组件成为低代码组件,这样低代码平台就可以通过拖拽组件,形成一个有个性化业务场景。...svg 可以支持动画 目前流行组件库已经都使用了 svg 代理字体图标,比如 ant-design、Material-UI 等 将引用 iconfont 转变为本地 svg 我们可以手动一个一个...(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'], }, {...你可以将 SVG 文件放在 src/文件夹任何位置,并将它们作为 React 组件导入使用。

    1.4K30

    如何使用Vue.js渲染JSON定义动态组件

    使用Vue.js,渲染动态组件非常容易,我们可以根据其名称来使用对应组件和布局来渲染内容。...下边是一个需要渲染内容JSON数据 json数据content里边有个body数组,每个元素中都有一个component字段,这个字段决定了使用哪个组件去渲染。...循环输出content body数组 使用动态组件 翻阅到Vue官方文档动态组件那里,知道我们需要使用component组件,然后把组件名字传递给它:is属性,这样就可以渲染出名字对应组件内容。...创建组件,并在使用之前引入,声明 我们创建两个组件,一个是components/Foo, 另一个是components/Bar。...下边以Foo组件为例: 创建之后,就可以引入到App.vue组件,可以组件声明,也可以全局声明Foo组件。 App.vue 最终效果 ----

    7.4K20

    20多个好用 Vue 组件库,请查收!

    Ag-Grid 是一个基于Vue.js数据表格组件。其中,“ag” 表示 “agnostic”。内部 ag-Grid引擎是在TypeScript实现,零依赖关系。...Vue Content Loader是一个基于Vue.jsSVG占位符加载,可自定义SVG组件,用于创建占位符加载,例如Facebook加载卡。...Vue Radial Progress 这是一个径向进度条效果加载组件,使用svg和javascript绘制带有渐变径向进度条效果加载器,可以用作加载、进度提示。...一个作为单文件组件SVG Material Design图标集合。此外,这个库是一个Vue单文件组件集合,用于渲染Material Design图标。...vue-chartjs 是一个 Vue 对于 Chart.js 封装,让用户可以在Vue轻松使用Chart.js,很简单创建可复用图表组件,非常适合需要简单图表并尽可能快地运行的人。

    7.5K10

    SVG 图标在React项目中优化

    最后渲染到 html 代码来看,svg-react-loader 是有对 svg 原文件进行优化。从打包后文件大小可以看出来文件有被压缩: ? 这种方式缺点:SVG 资源不可被缓存。...且会将 svg 资源处理逻辑与页面的交互逻辑一起打包。 最好方式是:SVG 资源与 JS 资源分离,图片加载不影响页面的主要执行逻辑。...2)使用 svg-react-loader ,当一个组件需要加载多个 svg 文件时,所有的 svg 文件都会被打包到 index.js 文件。...第一种方法 第一种方法是把所有的图标通过 元素定义在 SVG 代码,嵌入在 元素图标是不会被直接显示。...可是这样还是有两个缺点:1)当需要使用这些 svg 时候,需要在组件单独 import。2)这个大 SVG 资源并没有与 JS 资源分离。 ? ?

    3.6K10

    更加优雅使用Icon

    SVG Icon ,然后再写一个 Vue 组件 统一加载它,在每次需要使用图标时就去下载一个 SVG 图标到 Icon 模块,使用组件并传入...相信大家有很多同学做项目组件库是基于 ElementUI,但是在 ElementUI 内置图标库是字体图标,很多同学包括自己为了省事或多或少会使用一些内置字体图标(特别是一些按钮上操作图标)...恰好发现了 antFu 大佬写 unplugin-icons 插件可以做到自定义图标组件图标使用一致并且还能为我们开发提供很大便捷(其实觉得ElementPlus 也是参考了这个),简直...使用图标库 我们再来看看项目中如何使用一个图标图标。...src/assets/svg/home/jihua.svg src/assets/svg/about/kefu.svg 上面是两个图标,接下来我们来配置自定义图标加载

    6.7K41

    nuxt3目录结构详解

    nuxt3目录结构详解 在 Nuxt.js 3 ,一个应用程序文件夹结构具有一定规范性。...以下是 Nuxt.js 3 文件夹结构及其用途详细解释: .nuxt 目录 Nuxt 使用.nuxt/目录在开发中生成您Vue应用程序。...global选项也可以为每个组件目录设置。 Dynamic Imports 要动态导入一个组件(也称为惰性加载组件),你所需要做就是在组件名称前添加Lazy前缀。...您可以在这里看到可传递选项列表,或者阅读关于过渡如何工作更多信息。 你可以为这些属性设置默认值在你nuxt.config。 middleware 可以在加载此页面之前定义要应用中间件。...使用此实用工具方法,您将能够在应用程序以编程方式导航用户。这对于用户获取输入并在整个应用程序动态导航用户非常有用。

    2.3K10

    Vue项目中优雅使用icon

    ,首先我们不能覆盖原有的svg解析loader,我们只需要把icons/svg这个文件夹svg文件解析打包即可,我们在vue.config.jschainWebpack函数配置,来看代码 //...,我们在icons/文件夹下新建index.js文件,两行代码搞定,内容如下 // icons图标自动加载 const req = require.context("..../svg文件为上下文,使用正则匹配了它需要检测文件名,这样它就会在当前目录svg文件夹下去匹配符合规则文件名 然后我们使用req.keys拿到所有文件名数组,再使用map遍历加载req方法,这样当该文件被调用时会遍历加载所有匹配到文件...: hidden; } 当然组件内部我们还可以根据自身项目情况进行扩展,这边写了基础配置 组件写好了之后我们在icons/index.js中进行全局注册,这样我们只引入这一个文件就可以达到自动加载组件注册两个功能...最后就是我们使用了,在main.js文件引入icons/index.js import "@/icons/index.js"; 再来看看我们使用图标的方法,组件: <svg-icon

    2.2K20

    Nuxt3 实战 (一):初始化项目

    服务端渲染(SSR)和静态站点生成(SSG):Nuxt3 支持服务端渲染和静态站点生成,这有助于解决单页应用(SPA) SEO 问题,提高页面加载速度,从而改善用户体验。...components // 放置所有 Vue 组件地方。 composables // 将你Vue组合式函数自动导入到你应用程序。...node_modules // 包管理器会将项目的依赖存储在 node_modules/ 目录。 pages // Nuxt 提供了基于文件路由功能,用于在你 Web 应用创建路由。....nuxtignore // 允许 Nuxt 在构建阶段忽略项目根目录下文件。 app.vue // Nuxt 应用主要组件,入口文件。...总结后续开发会以 Nuxt 为核心,开发一个类似这样网址导航页面,为此来探索 Nuxt 其中奥秘:Design Notes我会在此基础上加入一些设计和想法,致力于提高用户体验。

    50720

    记一次 Nuxt.js 登录页性能优化(性能提升十倍加)

    Nuxt.js 登录页性能优化 前言 最近有测试和 local 投诉,我们管理系统登录页面经常加载很久,常常会有页面已经出来了,但是点击登录毫无反应,直到全部加载后才能登录。...很明显 commons 优先级要高于 vendors,所以会把 test 规则匹配到第三方包优先拆分出来,这几个主要是 Nuxt 依赖一些库。...于是去看了一下 Nuxt 源码,发现这里还是暴露了配置给我们去定义一个新 HTML 模板。 当然,到最后也没去尝试这种方法,只是觉得应该可以实现。 ?...image HTML 模板删除 Nuxt 会暴露给我们一个 app.html 模板文件,它会在服务端渲染出来数据,最后替换到这个文件里面。 <!...打开项目的 node_modules 文件夹,找到 @nuxt/vue-renderer/dist/vue-renderer.js,在 SSRRenderer 这个类里面的 render 方法,我们可以看到如下代码

    3.2K10

    Nuxt.js实战:Vue.js服务器端渲染框架

    路由解析:Nuxt.js 使用 nuxt.config.js routes 配置(如果存在)或自动 pages/ 目录生成路由。...对应页面文件被识别,例如 pages/index.vue 或 pages/about.vue。数据预取:Nuxt.js 查找页面组件 asyncData 或 fetch 方法(如果存在)。...这些方法会在服务器端运行,用于API或其他数据源获取数据。数据获取后,会被序列化并注入到页面模板。模板渲染:Nuxt.js 使用 Vue.js 渲染引擎将组件和预取数据转换为HTML字符串。...动态路由Nuxt.js支持动态路由,这对于处理如博客文章、用户资料等具有动态ID内容非常有用。在pages/目录下创建一个动态路由文件,如id.vue:<!...代码分割: Nuxt.js 默认会进行代码分割,将应用分为多个小块,只加载当前页面需要代码,减少了初始加载体积。

    21200

    尚医通-客户端平台

    # 什么是NUXT Nuxt.js 是一个基于 Vue.js 轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅代码结构分层和热加载等特性。...'element-ui/lib/theme-chalk/index.css'//element-uicss Vue.use(ElementUI) 在nuxt.config.js文件中使用 myPlugin.js...组件目录 components 用于组织应用 Vue.js 组件Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData 方法特性。...布局目录 layouts 用于组织应用布局组件。 页面目录 pages 用于组织应用路由及视图。Nuxt.js框架读取该目录下所有的 .vue 文件并自动生成对应路由配置。...nuxt.config.js 文件 nuxt.config.js 文件用于组织Nuxt.js 应用个性化配置,以便覆盖默认配置。

    5.8K20

    记一次 Nuxt.js 登录页性能优化

    很明显 commons 优先级要高于 vendors,所以会把 test 规则匹配到第三方包优先拆分出来,这几个主要是 Nuxt 依赖一些库。...于是去看了一下 Nuxt 源码,发现这里还是暴露了配置给我们去定义一个新 HTML 模板。当然,到最后也没去尝试这种方法,只是觉得应该可以实现。... HTML 模板删除 Nuxt 会暴露给我们一个 app.html 模板文件,它会在服务端渲染出来数据,最后替换到这个文件里面。 <!...打开项目的 node_modules 文件夹,找到 @nuxt/vue-renderer/dist/vue-renderer.js,在 SSRRenderer 这个类里面的 render 方法,我们可以看到如下代码...涉及到图片之类事先把他们上传到了 CDN 上面,然后根据环境变量去加载不同 CDN 地址。

    99110

    基于Vue前端架构,做了这15点

    如何知道你要加载图标在什么路径下?...自动注册 Svg 图标 在日常开发,总是会有着大量图标需要使用,这里我们直接选择使用 SVG 图标。但是如果每次使用图标还需要通过路径找到这张图标岂不是很麻烦?...首先需要对 @/assets/icons 文件夹 svg 图标进行自动注册,需要对 webpack 和 svg-sprite-loader 进行了相关设置,文件全部打包成 svg-sprite。...页面内组件:在页面文件夹下创建 components 文件夹,在其内部对应创建相应组件文件,如果是复杂组件,应以文件夹形式创建组件。...9.组件库 对于很多第三方工具,坚持认为二次封装成 vue 插件并没有多少开发成本,反而让你在后续开发变得很灵活。

    2.6K20

    龟速 11s 到闪电 1s,详解前端性能优化之首屏加载

    ,比如页面上没引用到SVG图标、应该被内联小图等 部分图片资源较大,最大达到仅400KB Webpack Bundle分析 优化前Bundle webpack bundle可以看出,问题着实不少...48.9KB ⚡优化SVG图标 内容(点击展开/收起) 这一步我们来优化部分冗余SVG图标被打包进去情况,一般项目中SVG使用方式都是在iconfont生成JS然后引入。...svg组件,传入复制下SVG文件名即可 删除 只需要去掉使用地方,然后删除对应图标即可 要实现上述效果,只需要 引入svg-sprite-loader // install npm i svg-sprite-loader...一般来说不需要做特别处理,如果判断不需要或者需要调整在vue.config.js配置即可 理论上prefetch不会影响加载速度,但实际测试,是有轻微影响,不过这个见仁见智,认为总体体验上还是有所提升...参考 2018 前端性能优化清单[6] 如何让公司后台管理系统焕然一新\(上\)-性能优化[7] ...

    2.9K20
    领券