在nuxt.js中动态加载svg图标可以通过以下步骤实现:
assets/icons
目录下,确保svg文件具有唯一的文件名。<template>
标签来定义图标的显示方式,使用<script>
标签来导入svg图标文件,使用<style>
标签来自定义图标的样式。例如,创建一个名为Icon
的Vue组件:<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文件内容,并将其作为字符串返回给模板渲染。
<Icon>
组件,并传入图标文件的名称作为name
属性。例如:<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图标的答案,希望能够帮助到您!
领取专属 10元无门槛券
手把手带您无忧上云