nuxt 2.x 加载 svg 小列子

最新推荐文章于 2025-03-05 12:21:46 发布

原创最新推荐文章于 2025-03-05 12:21:46 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nuxt2 #svg #svg-sprite-loader

Vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

nuxt

1 篇文章

订阅专栏

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

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)