CSS (Next.js) 如何更改 next/image 中 SVG 的颜色

在本文中，我们将介绍如何在 Next.js 中更改 next/image 中 SVG 的颜色。

阅读更多：CSS 教程

1. 概述

Next.js 是一个流行的 React 框架，它提供了 next/image 模块来优化图像加载。该模块支持 SVG 图像，并提供了一种简单的方式来加载和处理 SVG 图像。

然而，当我们使用 next/image 加载 SVG 图像时，有时需要改变 SVG 图像的颜色。下面将介绍两种方法来实现这个目标。

2. 使用CSS样式

第一种方法是使用 CSS 样式来更改 SVG 的颜色。在 next/image 中，SVG 在加载时会被包装在一个

div> 元素中，可以使用 CSS 选择器来选择

div> 元素并修改其子元素（即 SVG）的颜色。

在代码中，我们给

div> 元素添加一个类名，并使用 CSS 样式来修改 SVG 的颜色。例如，假设我们将类名设置为 “custom-svg”，我们可以使用下面的 CSS 样式来更改 SVG 的颜色：

.custom-svg svg {
  fill: red;
}

上面的代码将把 SVG 的颜色修改为红色。你可以根据需要修改填充颜色。

3. 使用 React 组件

第二种方法是使用自定义 React 组件来更改 SVG 的颜色。在 Next.js 中，我们可以通过创建一个包装 SVG 的组件，并在组件中设置颜色属性来修改 SVG 的颜色。

首先，创建一个名为 “ColoredSVG” 的新组件。在这个组件中，我们将使用 props 来接收颜色值，并将其应用到 SVG 的 “fill” 属性上。

import React from 'react';

const ColoredSVG = ({ color }) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={color}>
      // SVG paths and other elements
    </svg>
  );
};

export default ColoredSVG;

在代码中，我们将 SVG 的 “fill” 属性设置为传递给组件的颜色值，以实现颜色的更改。你可以根据需要设置其他属性来自定义 SVG。

在你的 Next.js 页面或组件中，你可以像使用任何其他 React 组件一样使用这个自定义的 “ColoredSVG” 组件，并为它传递颜色值。例如：

import ColoredSVG from './ColoredSVG';

const MyPage = () => {
  return (
    <div>
      <ColoredSVG color="blue" />
    </div>
  );
};

export default MyPage;

上面的代码将在页面中显示一个颜色为蓝色的 SVG 图像。