如何在WebChat中更改SendIcon

Question

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

Answer 1

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

BotFramework-WebChat存储库（#1839）上还有一个未解决的问题，该问题正在讨论如何使sendBox可自定义。没有关于何时发生这种事件的预计到达时间，但要记住一些事情。

要在页面上添加此代码，请添加从const parent开始的代码。如果要保持与当前箭头相同的大小，请确保将图像大小设置为28x28。

<script>
  ( async function () {
    const res = await fetch( 'http://somesite/directline/token', { method: '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.createElementNS("http://www.w3.org/2000/svg", "svg");
    const img = document.createElement("img");
    img.src= 'bot - small.png';
    svg.setAttribute('height', '28');
    svg.setAttribute('width', '28');
    svg.appendChild(img);
    child[0].replaceWith(img);

    }
  )().catch( err => console.error( err ) );
</script>

希望有帮助！

Answer 2

该图标当前无法更改为设置。

但是您仍然可以派生存储库并更改图标，其定义位于此处：https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/SendBox/Assets/SendIcon.js

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;