React中如何动态加载Lottie JSON文件并修改其颜色？

一、动态加载Lottie JSON并切换图标（完全可行） #

要实现动态菜单中切换Lottie图标，核心是根据传入的文件名动态加载对应的JSON资源，推荐使用lottie-react库简化操作。

步骤1：安装依赖 #

npm install lottie-react
# 或
yarn add lottie-react

步骤2：实现动态加载组件 #

方式1：本地JSON文件动态import（webpack打包场景）

如果Lottie JSON文件放在项目源码目录下（如src/lotties/），可通过动态import让webpack自动处理资源：

import { useEffect, useState } from 'react';
import Lottie from 'lottie-react';

const DynamicLottie = ({ iconFileName }) => {
  const [animData, setAnimData] = useState(null);

  useEffect(() => {
    // 清空之前的动画数据，避免切换时闪烁
    setAnimData(null);
    // 动态加载对应文件名的JSON
    import(`../lotties/${iconFileName}.json`)
      .then(module => setAnimData(module.default))
      .catch(err => console.error('加载Lottie文件失败:', err));
  }, [iconFileName]);

  if (!animData) return <div className="icon-loading">加载中...</div>;

  return <Lottie animationData={animData} loop={true} style={{ width: 40, height: 40 }} />;
};

// 菜单使用示例
const AppMenu = () => {
  const [activeIcon, setActiveIcon] = useState('home');

  return (
    <nav className="menu-bar">
      <button onClick={() => setActiveIcon('home')}>首页</button>
      <button onClick={() => setActiveIcon('messages')}>消息</button>
      <button onClick={() => setActiveIcon('settings')}>设置</button>
      <div className="active-icon">
        <DynamicLottie iconFileName={activeIcon} />
      </div>
    </nav>
  );
};

export default AppMenu;

方式2：Fetch加载（public目录或远程资源）

如果JSON文件放在public目录下或为远程地址，用fetch更灵活：

import { useEffect, useState } from 'react';
import Lottie from 'lottie-react';

const DynamicLottie = ({ iconFileName }) => {
  const [animData, setAnimData] = useState(null);

  useEffect(() => {
    setAnimData(null);
    // public目录下的文件用相对路径，远程资源替换为完整URL
    fetch(`/lotties/${iconFileName}.json`)
      .then(res => res.json())
      .then(data => setAnimData(data))
      .catch(err => console.error('加载失败:', err));
  }, [iconFileName]);

  return animData ? <Lottie animationData={animData} loop={true} /> : null;
};

点击菜单按钮切换activeIcon的值，组件会自动加载并渲染对应Lottie图标，完全满足动态菜单需求。

二、修改Lottie文件的颜色 #

根据需求不同，有三种常用方案：

方案1：通过rendererSettings动态修改（精准控制） #

利用lottie-react的rendererSettings配置，遍历动画元素修改填充/描边颜色，前提是Lottie文件的图层为矢量格式（未合并为位图）：

import Lottie from 'lottie-react';

const ColoredLottie = ({ animationData, fillColor, strokeColor }) => {
  const rendererSettings = {
    filter: (asset) => {
      // 修改填充颜色
      if (asset?.fill) asset.fill = fillColor;
      // 修改描边颜色
      if (asset?.stroke) asset.stroke = strokeColor;
      return asset;
    }
  };

  return <Lottie animationData={animationData} rendererSettings={rendererSettings} loop={true} />;
};

// 使用示例：将图标改为蓝色
<ColoredLottie animationData={homeAnimData} fillColor="#165DFF" strokeColor="#165DFF" />

方案2：CSS滤镜快速调整整体色调 #

如果不需要精准控制单个元素，用CSS滤镜可快速修改整个图标的颜色，适合批量调整：

.lottie-custom-color {
  /* 示例：将图标转为橙色，可按需调整滤镜参数 */
  filter: hue-rotate(30deg) saturate(150%) brightness(110%);
  /* 也可用 invert + sepia 组合实现特定颜色 */
  filter: invert(40%) sepia(100%) saturate(500%) hue-rotate(350deg);
}

给Lottie组件添加该类名即可生效：

<Lottie animationData={animData} className="lottie-custom-color" loop={true} />

方案3：编辑源JSON文件（静态修改） #

如果不需要动态调整颜色，最稳妥的方式是用LottieFiles Editor打开原JSON文件，直接在编辑器中修改图层的填充、描边属性，导出新JSON后替换原文件即可。

内容的提问来源于stack exchange，提问作者Yousi