BotFramework-WebChat/packages/component/src/Icon/ComponentIcon.module.css at 3285d8b74fd5c5ef84a5deb3a864826c42ec61ab · microsoft/BotFramework-WebChat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
:global(.webchat) .component-icon {
  min-width: var(--webchat__component-icon--size, 1em);
  min-height: var(--webchat__component-icon--size, 1em);
  place-self: center;

  /* Use the image as texture. */
  background-image: var(--webchat__component-icon--image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--webchat__component-icon--size, 1em);

  /* If image is not set, fallback to solid color. */
  background-color: var(--webchat__component-icon--color, transparent);

  /* 3. Set the mask if any. */
  -webkit-mask-image: var(--webchat__component-icon--mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: var(--webchat__component-icon--size, 1em);
  mask-image: var(--webchat__component-icon--mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: var(--webchat__component-icon--size, 1em);
}

/* #region: Appearance */
:global(.webchat) .appearance--text {
  --webchat__component-icon--color: currentColor;
}
/* #endregion */

/* #region: Icons */
:global(.webchat) .icon--dismiss {
  --webchat__component-icon--mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"/></svg>');
}
/* #endregion */