更改 next.js 中导入图像的颜色

Question

我创建了一个自定义图标并将其作为 SVG 导入到我的 next.js 应用程序中。我想实现一个功能，用户可以自定义该图标的颜色，例如红色到黄色或黑色等。但是这是静态图像，有什么办法可以实现这一点吗？

Answer 1

有几种可能的方法可以解决这个问题：

• Webpack 通过@svgr/webpack
• 通天塔babel-plugin-inline-react-svg
• Next.js 图像来自Dangerously Allow SVGin next.config.js（不推荐的方法）

首先，您的 SVG 图像需要是可填充的。如何做到这一点超出了问题的范围，但网上有很多资源可以帮助您。

适用于下面的每种方法（为了节省间距而不再重复）

在您希望 SVG 显示的文件中

import Star from './star.svg'

const Example = () => (
  <div>
    // set your color in fill and stroke is optional
    <Star height="100" width="100" fill="#6973ff" stroke="black" />
  </div>
)

Webpack（推荐选择）

我在 Codesandbox 上用这种方法做了一个演示

从react-svgr中提取的片段代码

1. 安装yarn add --dev @svgr/webpack
2. 在next.config.js文件中添加以下内容：

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

3. 在文件中查看您希望 SVG 显示上面的代码

巴别塔

从插件存储库中提取的片段代码

1. yarn add -D babel-plugin-inline-react-svg

2. 将以下内容添加到您的.babelrc文件中：

{
  "plugins": [
    "inline-react-svg"
  ]
}

3. 在文件中查看您希望 SVG 显示上面的代码

Next.js 镜像（不推荐）

摘自 Next.js 关于为什么不应该使用这种方法的内容：

由于某些原因，默认加载器不会优化 SVG 图像。首先，SVG 是一种矢量格式，这意味着它可以无损地调整大小。其次，SVG 具有许多与 HTML/CSS 相同的功能，如果没有适当的内容安全策略 (CSP) 标头，这些功能可能会导致漏洞。

由于 Next.js 中所说的内容，我不会编写此示例，因为考虑到其他方法，它是多余的。

如果您仍然想遵循此过程，您可以查看他们的文档。