# 在 Next.js 中直接引入 SVG

- Link: https://www.ixiqin.com/2022/06/13/in-the-next-direct-introduction-of-svg-in-js/
- Published: 2022-06-13T06:00:00+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/06/13/in-the-next-direct-introduction-of-svg-in-js/#)

 * [最简单的加载方式 —— URL 加载](https://www.ixiqin.com/2022/06/13/in-the-next-direct-introduction-of-svg-in-js/#%e6%9c%80%e7%ae%80%e5%8d%95%e7%9a%84%e5%8a%a0%e8%bd%bd%e6%96%b9%e5%bc%8f_%e2%80%94%e2%80%94_url_%e5%8a%a0%e8%bd%bd)
 * [最舒服的加载方式 —— 编程加载](https://www.ixiqin.com/2022/06/13/in-the-next-direct-introduction-of-svg-in-js/#%e6%9c%80%e8%88%92%e6%9c%8d%e7%9a%84%e5%8a%a0%e8%bd%bd%e6%96%b9%e5%bc%8f_%e2%80%94%e2%80%94_%e7%bc%96%e7%a8%8b%e5%8a%a0%e8%bd%bd)
 * [总结](https://www.ixiqin.com/2022/06/13/in-the-next-direct-introduction-of-svg-in-js/#%e6%80%bb%e7%bb%93)

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

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

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

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

    ```shcb-line-numbers
    <img src="/logo.svg" alt="Logo SVG" />
    Code language: HTML, XML (xml)
    ```

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

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

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

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

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

    ```php
    # yarn
    yarn add @svgr/webpack
    # npm
    npm install --save @svgr/webpack
    Code language: PHP (php)
    ```

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

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

        return config;
      }
    };
    Code language: JavaScript (javascript)
    ```

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

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


    // usage
    <Logo />
    Code language: JavaScript (javascript)
    ```

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

## 总结

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