5

在 Next.js 中直接引入 SVG

 2 years ago
source link: https://www.ixiqin.com/2022/06/13/in-the-next-direct-introduction-of-svg-in-js/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
computer screen displaying website home page

在 Next.js 中直接引入 SVG

随着 SVG 的兴起，过去使用雪碧图、IconFont 作为界面中图标用法已经过时。大家会更倾向于加载更加简单、空间占用更小、编写更容易的 SVG 作为图标的解决方案。

而 Next.js 同样对于 SVG 提供了支持。

最简单的加载方式 —— URL 加载

如果不希望对应用程序做任何的改进，一个最简单的方式是直接使用路径进行加载。只需要使用一个 img 标签，并设定 src 为 svg 文件的路径就可以了。

<img src="/logo.svg" alt="Logo SVG" />

不过，使用 URL 来加载的问题是，当你的文件夹路径和结构比较复杂的时候，你需要使用一个较长的路径来加载 SVG，比较麻烦。

当然， 你也可以简单的优化这个方案 —— 比如自行封装一个 svg component，支持传入文件名 & alt 文字和其他参数。这样在调用的时候只需要输入文件名即可。

最舒服的加载方式 —— 编程加载

在 Next.js 当中，如果你希望更加舒服的引入 SVG，那比较好的方案是使用 import 标签来进行引入。不过，由于 SVG 本身并不是一个标准的 React 组件，你需要在 Next.js 上安装插件来支持对 SVG 的解析。

加入对 SVG 的解析需要安装 @svgr/webpack 插件。执行如下命令安装插件。

# yarn
yarn add @svgr/webpack
# npm
npm install --save @svgr/webpack

安装完成后，修改 next.config.js添加相关的解析规则。

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    }); // 针对 SVG 的处理规则

    return config;
  }
};

修改后保存，便可以直接使用 import 语法来处理

import Logo from "../assets/logo.svg";


// usage
<Logo />

这样，你就可以直接将 SVG 作为一个 Component 引入，并使用你熟悉的 React Componet Props 来修改这个 Component 的各项属性。

在这篇文章中，分享了两种在 Next.js 的方法，你可以根据自己的实际情况来决定选择具体使用什么样的方式来引入 SVG。

本条目发布于2022年6月13日。属于Next.js分类，被贴了 Javascript、next.js、node.js 标签。 ← 使用 Proxy.py 自建 HTTP Proxy

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

评论 *

显示名称 *

电子邮箱地址 *

网站地址

在此浏览器中保存我的显示名称、邮箱地址和网站地址，以便下次评论时使用。

如果有人回复我的评论，请通过电子邮件通知我。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK