nuxt 2.x 加载 svg 小列子

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

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

使用 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)

github

https://github.com/StriveNuby/nuxt-example/tree/master/nuxt-svg

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值