Botframework 如何更改WebChat中的SendIcon

我正在尝试替换WebChat上的发送图标。我可以更改现有图标的颜色，但如何用另一个图标替换SVG图像

---

看起来图标当前无法更改为设置

但您仍然可以分叉存储库并更改图标，其定义位于此处：

从“React”导入React；
常量SendIcon=（）=>(
);
导出默认发送图标；

看起来图标当前无法更改为设置

但您仍然可以分叉存储库并更改图标，其定义位于此处：

从“React”导入React；
常量SendIcon=（）=>(
);
导出默认发送图标；

如果您不想构建回购协议，另一种选择是直接在html中更改元素。一般来说，在React环境中直接更改DOM不是最佳实践，但是，在这种情况下，结果似乎是稳定的

BotFramework WebChat repo（）上还有一个未解决的问题，它正在讨论如何定制sendBox。没有关于何时可能发生的预计，但要记住一些事情

要在页面中包含此内容，请添加从

const parent

开始的代码。如果要保持与当前箭头相同的大小，请确保将图像大小设置为28x28

（异步函数（）{
const res=等待取数（'http://somesite/directline/token“，{方法：'POST'}）；
const{token}=await res.json（）；
[...]
document.querySelector（“#webchat>*”）.focus（）；
const parent=document.getElementsByClassName（'main'）
const child=parent[0]。children[2]。getElementsByTagName（'svg'）；
const svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
const img=document.createElement（“img”）；
src='bot-small.png'；
setAttribute（'height'，'28'）；
setAttribute（'width'，'28'）；
svg.appendChild（img）；
子项[0]。替换为（img）；
}
)（）.catch（err=>console.error（err））；

---

希望有帮助

如果您不想分叉并构建repo，另一种选择是直接在html中更改元素。一般来说，在React环境中直接更改DOM不是最佳实践，但是，在这种情况下，结果似乎是稳定的

BotFramework WebChat repo（）上还有一个未解决的问题，它正在讨论如何定制sendBox。没有关于何时可能发生的预计，但要记住一些事情

要在页面中包含此内容，请添加从

const parent

开始的代码。如果要保持与当前箭头相同的大小，请确保将图像大小设置为28x28

（异步函数（）{
const res=等待取数（'http://somesite/directline/token“，{方法：'POST'}）；
const{token}=await res.json（）；
[...]
document.querySelector（“#webchat>*”）.focus（）；
const parent=document.getElementsByClassName（'main'）
const child=parent[0]。children[2]。getElementsByTagName（'svg'）；
const svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
const img=document.createElement（“img”）；
src='bot-small.png'；
setAttribute（'height'，'28'）；
setAttribute（'width'，'28'）；
svg.appendChild（img）；
子项[0]。替换为（img）；
}
)（）.catch（err=>console.error（err））；

---

希望有帮助

将解决方案标记为“已接受”服务于更大的堆栈溢出社区和任何有类似问题的人。如果你觉得答案足够，请“接受”它。如果没有，让我知道我还能提供什么帮助！将解决方案标记为“已接受”服务于更大的堆栈溢出社区和任何有类似问题的人。如果你觉得答案足够，请“接受”它。如果没有，让我知道我还能提供什么帮助！

import React from 'react';

const SendIcon = () => (
  <svg height={28} viewBox="0 0 45.7 33.8" width={28}>
    <path clipRule="evenodd" d="M8.55 25.25l21.67-7.25H11zm2.41-9.47h19.26l-21.67-7.23zm-6 13l4-11.9L5 5l35.7 11.9z" />
  </svg>
);

export default SendIcon;