在Next.js中实现导入SVG图标的颜色自定义功能

方案1：将SVG作为React组件导入（推荐） #

把静态SVG转换成React组件，通过props传递颜色值动态修改，这是最灵活的方式：

1. 创建React组件文件（比如CustomIcon.js），将SVG代码粘贴进去，把固定的fill属性替换为props接收的颜色：

// components/CustomIcon.js
export default function CustomIcon({ color = '#000', size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* 替换为你自己的SVG路径 */}
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill={color} />
    </svg>
  )
}

2. 在页面中导入组件，传入用户选择的颜色：

// pages/index.js
import CustomIcon from '../components/CustomIcon'
import { useState } from 'react'

export default function Home() {
  const [iconColor, setIconColor] = useState('#ff0000')
  
  return (
    <div>
      <CustomIcon color={iconColor} />
      <select onChange={(e) => setIconColor(e.target.value)}>
        <option value="#ff0000">红色</option>
        <option value="#ffff00">黄色</option>
        <option value="#000000">黑色</option>
      </select>
    </div>
  )
}

方案2：用CSS滤镜修改静态SVG图片颜色（局限性较大） #

如果必须用静态图片形式的SVG，可通过CSS filter 属性调整颜色，但仅能实现有限的色调转换：

// pages/index.js
import { useState } from 'react'
import CustomIconImg from '../public/custom-icon.svg'

export default function Home() {
  const [filterStyle, setFilterStyle] = useState({ filter: 'hue-rotate(0deg)' })
  
  const handleColorChange = (color) => {
    let filter = ''
    switch(color) {
      case 'red':
        filter = 'hue-rotate(0deg) brightness(1.2)'
        break
      case 'yellow':
        filter = 'hue-rotate(60deg) brightness(1.5)'
        break
      case 'black':
        filter = 'grayscale(100%)'
        break
      default:
        filter = 'hue-rotate(0deg)'
    }
    setFilterStyle({ filter })
  }
  
  return (
    <div>
      <img src={CustomIconImg.src} style={filterStyle} alt="自定义图标" />
      <button onClick={() => handleColorChange('red')}>红色</button>
      <button onClick={() => handleColorChange('yellow')}>黄色</button>
      <button onClick={() => handleColorChange('black')}>黑色</button>
    </div>
  )
}

方案3：内联SVG结合CSS变量 #

将SVG代码直接内联到页面，用CSS变量控制颜色，通过JS动态修改变量值：

// pages/index.js
import { useState } from 'react'

export default function Home() {
  const [iconColor, setIconColor] = useState('#000')
  
  return (
    <div style={{ '--icon-color': iconColor }}>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill="var(--icon-color)" />
      </svg>
      <input type="color" value={iconColor} onChange={(e) => setIconColor(e.target.value)} />
    </div>
  )
}

内容的提问来源于stack exchange，提问作者A.P