nuxt 2.x 加载 svg 小列子

最新推荐文章于 2025-04-30 09:06:42 发布

StriveNuby

最新推荐文章于 2025-04-30 09:06:42 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue nuxt 文章标签： nuxt2 svg svg-sprite-loader

本文链接：https://blog.youkuaiyun.com/github_36820944/article/details/82952542

Vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

nuxt

1 篇文章

订阅专栏

本文介绍如何在Nuxt2.x项目中使用svg-sprite-loader加载SVG图标，通过修改nuxt.config.js配置文件，实现SVG图标的自动导入和使用。此方法能够有效提升网站性能，减少HTTP请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nuxt 2.x 加载 svg 小列子

使用 svg-sprite-loader 加载

// nuxt.config.js
const { resolve } = require('path')

// 排除 nuxt 原配置的影响
const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
svgRule.exclude = [resolve(__dirname, 'assets/svg')]

// svg 加载
config.module.rules.push({
  test: /\.svg$/,
  include: [resolve(__dirname, 'assets/svg')],
  loader: 'svg-sprite-loader'
})

<template>
  <svg aria-hidden="true">
    <use xlink:href="#user"/>
  </svg>
</template>

<script>
import "~/assets/svg/user.svg";
</script>

自动导入svg

// plugins/svg-icon.js

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('~/assets/svg', false, /\.svg$/)
requireAll(req)