updating Reactions icon and adding Number Symbol icon (#18012)

* updating Reactions icon and adding Number Symbol icon
microsoft · May 18, 2021 · bbbace7 · bbbace7
1 parent 6635a5f
commit bbbace7
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 19 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -61,6 +61,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Popup` to only render `Portal` when popup open @yuanboxue-amber ([#17926](https://github.com/microsoft/fluentui/pull/17926))
 
 ### Features
+- Add NumberSymbolIcon (#), MoleculeIcon, TaskListIcon; update ReactionsIcon and VideoEmphasisIcon @notandrew ([#18012](https://github.com/microsoft/fluentui/pull/18012))
 - Add default `backgroundActive2` and brand `backgroundPressed1` color slots @notandrew ([#17699](https://github.com/microsoft/fluentui/pull/17699))
 - Add data-popup-trapfocus to differentiate beween dialog and popup @jurokapsiar ([#17743](https://github.com/microsoft/fluentui/pull/17743))
 - Added `NotepadPersonIcon`. @TanelVari ([#17828](https://github.com/microsoft/fluentui/pull/17828))

diff --git a/packages/fluentui/react-icons-northstar/src/components/MoleculeIcon.tsx b/packages/fluentui/react-icons-northstar/src/components/MoleculeIcon.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { createSvgIcon } from '../utils/createSvgIcon';
+import { iconClassNames } from '../utils/iconClassNames';
+
+export const MoleculeIcon = createSvgIcon({
+  svg: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="2 2 16 16" className={classes.svg}>
+      <path
+        className={cx(iconClassNames.outline, classes.outlinePart)}
+        d="M13 10C15.2091 10 17 8.20914 17 6C17 3.79086 15.2091 2 13 2C10.7909 2 9 3.79086 9 6C9 6.46556 9.07954 6.91254 9.22576 7.3281L7.10461 8.38867C6.62395 8.14028 6.07836 8 5.5 8C3.567 8 2 9.567 2 11.5C2 13.433 3.567 15 5.5 15C6.70416 15 7.76629 14.3919 8.39605 13.466L11.0856 14.8491C11.0298 15.0566 11 15.2748 11 15.5C11 16.8807 12.1193 18 13.5 18C14.8807 18 16 16.8807 16 15.5C16 14.1193 14.8807 13 13.5 13C12.7023 13 11.9919 13.3736 11.5342 13.9553L8.83439 12.567C8.94194 12.2306 9 11.8721 9 11.5C9 10.5492 8.62089 9.68699 8.00558 9.05622L9.67358 8.22222C10.3911 9.29421 11.6131 10 13 10ZM13 9C11.3431 9 10 7.65685 10 6C10 4.34315 11.3431 3 13 3C14.6569 3 16 4.34315 16 6C16 7.65685 14.6569 9 13 9ZM5.5 14C4.11929 14 3 12.8807 3 11.5C3 10.1193 4.11929 9 5.5 9C6.88071 9 8 10.1193 8 11.5C8 12.8807 6.88071 14 5.5 14ZM15 15.5C15 16.3284 14.3284 17 13.5 17C12.6716 17 12 16.3284 12 15.5C12 14.6716 12.6716 14 13.5 14C14.3284 14 15 14.6716 15 15.5Z"
+      />
+      <path
+        className={cx(iconClassNames.filled, classes.filledPart)}
+        d="M17 6C17 8.20914 15.2091 10 13 10C11.6131 10 10.3911 9.29421 9.67358 8.22222L8.00558 9.05622C8.62089 9.68699 9 10.5492 9 11.5C9 11.8721 8.94194 12.2306 8.83439 12.567L11.5342 13.9553C11.9919 13.3736 12.7023 13 13.5 13C14.8807 13 16 14.1193 16 15.5C16 16.8807 14.8807 18 13.5 18C12.1193 18 11 16.8807 11 15.5C11 15.2748 11.0298 15.0566 11.0856 14.8491L8.39605 13.466C7.76629 14.3919 6.70416 15 5.5 15C3.567 15 2 13.433 2 11.5C2 9.567 3.567 8 5.5 8C6.07836 8 6.62395 8.14028 7.10461 8.38867L9.22576 7.3281C9.07954 6.91254 9 6.46556 9 6C9 3.79086 10.7909 2 13 2C15.2091 2 17 3.79086 17 6Z"
+      />
+    </svg>
+  ),
+  displayName: 'MoleculeIcon',
+});
diff --git a/packages/fluentui/react-icons-northstar/src/components/NumberSymbolIcon.tsx b/packages/fluentui/react-icons-northstar/src/components/NumberSymbolIcon.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { createSvgIcon } from '../utils/createSvgIcon';
+import { iconClassNames } from '../utils/iconClassNames';
+
+export const NumberSymbolIcon = createSvgIcon({
+  svg: ({ classes }) => (
+    <svg className={classes.svg} viewBox="2 2 16 16" role="presentation" focusable="false">
+      <path
+        className={cx(iconClassNames.outline, classes.outlinePart)}
+        d="M8.99027 2.59815C9.04442 2.32737 8.86881 2.06396 8.59803 2.0098C8.32725 1.95565 8.06384 2.13126 8.00968 2.40204L7.08939 7.00379L3.50005 7.00342C3.22391 7.00339 3.00003 7.22722 3 7.50337C2.99997 7.77951 3.22381 8.00339 3.49995 8.00342L6.8894 8.00377L6.09088 11.9966L2.50005 11.9962C2.22391 11.9962 2.00003 12.22 2 12.4962C1.99997 12.7723 2.22381 12.9962 2.49995 12.9962L5.8909 12.9966L5.00987 17.402C4.95571 17.6728 5.13132 17.9362 5.4021 17.9903C5.67289 18.0445 5.9363 17.8689 5.99045 17.5981L6.91068 12.9967L11.9143 12.9972L11.0102 17.3995C10.9546 17.67 11.1289 17.9343 11.3994 17.9899C11.6699 18.0454 11.9342 17.8712 11.9898 17.6007L12.9351 12.9973L16.5025 12.9977C16.7786 12.9977 17.0025 12.7739 17.0025 12.4977C17.0026 12.2216 16.7787 11.9977 16.5026 11.9977L13.1405 11.9973L13.9604 8.00451L17.4999 8.00488C17.7761 8.00491 18 7.78108 18 7.50493C18 7.22879 17.7762 7.00491 17.5001 7.00488L14.1658 7.00453L15.0674 2.61399C15.123 2.34349 14.9487 2.07918 14.6782 2.02363C14.4077 1.96808 14.1434 2.14233 14.0879 2.41282L13.1449 7.00443L8.10917 7.0039L8.99027 2.59815ZM7.90918 8.00388L12.9396 8.00441L12.1196 11.9972L7.11067 11.9967L7.90918 8.00388Z"
+      />
+      <path
+        className={cx(iconClassNames.filled, classes.filledPart)}
+        d="M8.98913 2.87737C9.0594 2.46916 8.78545 2.08127 8.37724 2.01099C7.96904 1.94072 7.58115 2.21467 7.51087 2.62288L6.84293 6.50274L3.74965 6.50418C3.33544 6.50437 2.99981 6.84032 3 7.25453C3.00019 7.66874 3.33614 8.00437 3.75035 8.00418L6.58467 8.00286L5.89677 11.9987L2.74965 12.0001C2.33544 12.0003 1.99981 12.3363 2 12.7505C2.00019 13.1647 2.33614 13.5003 2.75035 13.5001L5.63851 13.4988L5.0146 17.1229C4.94432 17.5311 5.21827 17.919 5.62648 17.9892C6.03469 18.0595 6.42257 17.7856 6.49285 17.3774L7.1607 13.4981L11.638 13.496L11.0133 17.1229C10.943 17.5311 11.2169 17.919 11.6251 17.9893C12.0333 18.0596 12.4212 17.7857 12.4916 17.3775L13.1602 13.4953L16.2539 13.4938C16.6681 13.4936 17.0037 13.1577 17.0036 12.7435C17.0034 12.3292 16.6674 11.9936 16.2532 11.9938L13.4186 11.9951L14.1069 7.99934L17.2503 7.99787C17.6646 7.99768 18.0002 7.66174 18 7.24752C17.9998 6.83331 17.6639 6.49768 17.2496 6.49787L14.3653 6.49922L14.9891 2.87749C15.0594 2.46929 14.7855 2.08138 14.3773 2.01107C13.9691 1.94076 13.5812 2.21467 13.5109 2.62287L12.8431 6.49993L8.36512 6.50202L8.98913 2.87737ZM8.10686 8.00215L12.5847 8.00005L11.8964 11.9958L7.41896 11.9979L8.10686 8.00215Z"
+      />
+    </svg>
+  ),
+  displayName: 'NumberSymbolIcon',
+});
diff --git a/packages/fluentui/react-icons-northstar/src/components/ReactionsIcon.tsx b/packages/fluentui/react-icons-northstar/src/components/ReactionsIcon.tsx
@@ -5,14 +5,14 @@ import { iconClassNames } from '../utils/iconClassNames';
 
 export const ReactionsIcon = createSvgIcon({
   svg: ({ classes }) => (
-    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+    <svg role="presentation" focusable="false" viewBox="2 2 16 16" className={classes.svg}>
       <path
         className={cx(iconClassNames.outline, classes.outlinePart)}
-        d="M15.758,17.406a.7.7,0,0,0,.7.7.707.707,0,1,0,.016-1.414A.726.726,0,0,0,15.758,17.406Zm5.008.008a.7.7,0,0,0-.711-.711.692.692,0,0,0-.719.7.7.7,0,0,0,.711.711A.722.722,0,0,0,20.766,17.414ZM15.5,20.453a3.919,3.919,0,0,0,2.758,1.117,3.837,3.837,0,0,0,2.765-1.125l-.492-.492a3.252,3.252,0,0,1-2.273.914,3.189,3.189,0,0,1-2.266-.914C15.828,20.117,15.664,20.281,15.5,20.453Zm2.836-7.617c-.1,0-.2,0-.289.008.008.015.008.031.015.047a3.245,3.245,0,0,1,.157.609c.015.078.117.047.172.047a4.873,4.873,0,1,1-4.844,6.273l-.664.258a5.67,5.67,0,1,0,5.453-7.242Zm-1.617.922a1.019,1.019,0,0,0-1.11-.946,2.177,2.177,0,0,0-1.617.711c.055-.578.078-1.156.125-1.734.055-.625.149-1.281.149-1.906a.98.98,0,0,0-.985-1.039c-.133,0-.258.039-.383.047,0-.016-.007-.024-.007-.032A1,1,0,0,0,11.836,8a1,1,0,0,0-1.047.664,1.558,1.558,0,0,0-.469-.094.984.984,0,0,0-.445.1c-.609.3-.547.812-.547,1.39a1.307,1.307,0,0,0-.344-.046A.962.962,0,0,0,8,11.039c0,.7.1,1.406.133,2.1.07,1.445-.071,3.117.929,4.3.329.383.454.969.977,1.125a4.47,4.47,0,0,0,1.25.157,3.04,3.04,0,0,0,1.641-.289c.617-.383.461-.86.632-1.032s.336-.336.493-.508a5.834,5.834,0,0,0,.992-1.437,1.683,1.683,0,0,1,.883-.883C16.3,14.422,16.719,14.219,16.719,13.758Zm-5.305,4.226a4.359,4.359,0,0,1-1.148-.117.273.273,0,0,1-.2-.164c-.39-.891-.874-.945-1.1-2.2a21.608,21.608,0,0,1-.125-2.57c-.031-.649-.148-1.313-.148-1.961,0-.149.25-.219.367-.219s.242.016.257.148c.118.852.047,1.727.149,2.586a.334.334,0,0,0,.344.3.363.363,0,0,0,.343-.406c0-1.242-.171-2.5-.171-3.742a.3.3,0,0,1,.328-.344c.234,0,.359.086.367.328.023.539.016,2.953.117,3.2a.321.321,0,0,0,.289.18c.266,0,.352-.227.352-.453,0-1.024-.055-2.039-.055-3.063,0-.336-.016-.734.43-.734.3,0,.39.164.39.445,0,.727-.023,1.453-.039,2.18-.008.453-.054.9-.054,1.352a.355.355,0,0,0,.343.382.329.329,0,0,0,.328-.289,2.308,2.308,0,0,0,.032-.406c.007-.547.039-1.1.062-1.648.016-.313.016-.633.039-.938a.269.269,0,0,1,.3-.242c.172,0,.359.07.359.273,0,.446-.07.891-.1,1.336-.063,1-.2,2-.2,3.008,0,.164.289.25.422.25.563,0,1.157-.9,1.9-.9.265,0,.25.062.445.156a3.367,3.367,0,0,0-1.375.984c-.1.141-.148.3-.234.438l-.008.008A5.971,5.971,0,0,1,13.055,16.9c-.25.235-.211.4-.3.688a.421.421,0,0,1-.289.281A3.156,3.156,0,0,1,11.414,17.984Z"
+        d="M4.49999 1C3.84688 1 3.29127 1.4174 3.08535 2H3C1.89543 2 1 2.89543 1 4.00001V8.79181C1 9.33517 1.12651 9.87106 1.3695 10.3571L2 11.6181C2.42348 12.465 3.28913 13 4.23606 13H6.05847C7.13892 13 8.04834 12.3108 8.57636 11.4921C9.18166 10.5537 10.2975 9.27363 12.1969 8.45958C12.4225 8.36291 12.5446 8.11683 12.485 7.87874C12.3379 7.29004 12.0643 6.86602 11.6925 6.59564C11.3254 6.32864 10.9155 6.25001 10.5625 6.25001C10.3606 6.25001 10.169 6.27554 9.99998 6.31089V4.00001C9.99998 2.89543 9.10455 2 7.99999 2H7.91463C7.70871 1.4174 7.1531 1 6.49999 1H4.49999ZM4.49999 2H4.99999V6.50001C4.99999 6.77615 5.22385 7.00001 5.49999 7.00001C5.77613 7.00001 5.99999 6.77615 5.99999 6.50001V2H6.49999C6.77613 2 6.99999 2.22386 6.99999 2.5V6.50001C6.99999 6.77615 7.22385 7.00001 7.49999 7.00001C7.77613 7.00001 7.99999 6.77615 7.99999 6.50001V3C8.55227 3 8.99998 3.44772 8.99998 4.00001V7.00001C8.99998 7.1733 9.08971 7.33423 9.23712 7.42534C9.38403 7.51613 9.56736 7.52467 9.72203 7.448L9.72322 7.44741L9.73257 7.44303C9.74246 7.43845 9.75885 7.43106 9.78092 7.42177C9.82527 7.40309 9.89134 7.37725 9.97268 7.35122C10.1392 7.29795 10.3507 7.25001 10.5625 7.25001C10.772 7.25001 10.9558 7.29638 11.1043 7.40438C11.1933 7.46912 11.29 7.57076 11.3752 7.7363C9.50517 8.64875 8.37227 9.96364 7.736 10.9501C7.3308 11.5783 6.69974 12 6.05847 12H4.23606C3.6679 12 3.14851 11.679 2.89442 11.1708L2.26393 9.90985C2.09036 9.56271 2 9.17992 2 8.79181V4.00001C2 3.44772 2.44771 3 3 3V6.50001C3 6.77615 3.22385 7.00001 3.49999 7.00001C3.77614 7.00001 3.99999 6.77615 3.99999 6.50001V2.5C3.99999 2.22386 4.22385 2 4.49999 2ZM13.2614 7.05226C15.9386 7.423 18 9.72076 18 12.5C18 15.5376 15.5376 18 12.5 18C9.91955 18 7.75415 16.2229 7.16088 13.8258C7.49442 13.7179 7.80391 13.5648 8.08617 13.3807C8.49564 15.4443 10.3162 17 12.5 17C14.9853 17 17 14.9853 17 12.5C17 10.357 15.5021 8.56391 13.4961 8.11061C13.5077 7.95474 13.4949 7.79487 13.4552 7.63618C13.4043 7.43259 13.3399 7.23737 13.2614 7.05226ZM10.75 12.5C11.1642 12.5 11.5 12.1642 11.5 11.75C11.5 11.3358 11.1642 11 10.75 11C10.3358 11 10 11.3358 10 11.75C10 12.1642 10.3358 12.5 10.75 12.5ZM15 11.75C15 12.1642 14.6642 12.5 14.25 12.5C13.8358 12.5 13.5 12.1642 13.5 11.75C13.5 11.3358 13.8358 11 14.25 11C14.6642 11 15 11.3358 15 11.75ZM10.9473 14.2764C10.8238 14.0294 10.5235 13.9293 10.2765 14.0528C10.0295 14.1763 9.92942 14.4766 10.0529 14.7236C10.3005 15.2188 11.1024 16 12.5001 16C13.8978 16 14.6997 15.2188 14.9473 14.7236C15.0708 14.4766 14.9707 14.1763 14.7237 14.0528C14.4767 13.9293 14.1764 14.0294 14.0529 14.2764C13.9672 14.4479 13.5024 15 12.5001 15C11.4978 15 11.0331 14.4479 10.9473 14.2764ZM1.3695 10.3571L1.81672 10.1335L1.3695 10.3571Z"
       />
       <path
         className={cx(iconClassNames.filled, classes.filledPart)}
-        d="M13.805,14.359c-.047-.054-.133-.156-.133-.226,0-.422.078-.891.117-1.3.063-.594.1-1.2.149-1.789s.117-1.2.117-1.789c0-.273-.352-.43-.586-.43-.3,0-.555.141-.571.461-.062,1.078-.093,2.18-.2,3.258-.015.156-.023.313-.226.313-.149,0-.2-.164-.2-.29,0-.539.047-1.078.055-1.617.016-.7.047-1.39.047-2.086,0-.445-.047-.859-.6-.859-.507,0-.617.328-.617.781,0,1.235.032,2.461.032,3.7a.245.245,0,0,1-.219.265c-.219,0-.235-.2-.235-.367l-.023-1.266c-.016-.7-.008-1.429-.047-2.132a.517.517,0,0,0-.555-.5.56.56,0,0,0-.617.539c0,.187.024.39.031.586.039.781.086,1.57.118,2.351.015.344.054.688.054,1.031a.243.243,0,0,1-.218.258.194.194,0,0,1-.172-.1c-.117-.227-.117-2.149-.2-2.618-.047-.273-.226-.367-.492-.367-.25,0-.617.133-.617.438,0,.539.094,1.437.156,1.992A17.936,17.936,0,0,1,8.2,14.633a4.778,4.778,0,0,0,.961,3.047,2.384,2.384,0,0,1,.406.64.558.558,0,0,0,.375.36,5.094,5.094,0,0,0,1.375.156,3.659,3.659,0,0,0,1.235-.141c.8-.289.4-.765.8-1.156A7.66,7.66,0,0,0,15.078,15.3a2.045,2.045,0,0,1,.61-.774c.289-.218.632-.32.929-.523a.237.237,0,0,0,.1-.2c0-.445-.5-.664-.883-.664A3.467,3.467,0,0,0,13.805,14.359Zm-.985,5.508a5.674,5.674,0,1,0,5.524-7.039,4.886,4.886,0,0,0-.672.047v.008a2.139,2.139,0,0,1,.258.883,1.526,1.526,0,0,1-.032.328c-.148.734-.64.914-1.226,1.226a.92.92,0,0,0-.391.3,1.392,1.392,0,0,0-.125.235,7.281,7.281,0,0,1-.812,1.3c-.3.383-.656.711-.977,1.071-.047.054-.172.515-.258.664A2.2,2.2,0,0,1,12.82,19.867Zm3.172.086a3.275,3.275,0,0,0,4.539,0l.485.492a3.823,3.823,0,0,1-2.758,1.125,3.9,3.9,0,0,1-2.75-1.117Zm1.2-2.547a.715.715,0,0,1-1.43,0,.715.715,0,0,1,1.43,0Zm3.578.008a.716.716,0,0,1-.719.688.7.7,0,1,1,.719-.688Z"
+        d="M5.5 1C5.77614 1 6 1.22386 6 1.5V6.5C6 6.77614 6.22386 7 6.5 7C6.77614 7 7 6.77614 7 6.5V2.5C7 2.22386 7.22386 2 7.5 2C7.77614 2 8 2.22386 8 2.5V6.75115C8.09762 6.72613 8.20247 6.70518 8.31298 6.69136C8.62879 6.65189 9.00108 6.66972 9.37981 6.82752C9.76201 6.98678 10.1175 7.27485 10.416 7.72265C10.4984 7.84625 10.5216 8.00008 10.4793 8.14247C10.4369 8.28486 10.3335 8.40106 10.197 8.45957C8.69376 9.1038 7.90733 10.0318 7.48882 10.8261C6.94481 11.8585 5.88728 13 4.5 13H4.23607C3.28914 13 2.42348 12.465 2 11.618L1.3695 10.357C1.12651 9.87105 1 9.33515 1 8.7918V2.5C1 2.22386 1.22386 2 1.5 2C1.77614 2 2 2.22386 2 2.5V6.5C2 6.77614 2.22386 7 2.5 7C2.77614 7 3 6.77614 3 6.5V1.5C3 1.22386 3.22386 1 3.5 1C3.77614 1 4 1.22386 4 1.5V6.5C4 6.77614 4.22386 7 4.5 7C4.77614 7 5 6.77614 5 6.5V1.5C5 1.22386 5.22386 1 5.5 1ZM8.37361 11.2922C8.08547 11.8391 7.63236 12.4842 7.02319 13.0075C7.27934 15.8072 9.63363 18 12.5001 18C15.5377 18 18.0001 15.5376 18.0001 12.5C18.0001 9.46243 15.5377 7 12.5001 7C12.0643 7 11.6403 7.05069 11.2337 7.14649L11.2482 7.16795C11.4954 7.53874 11.5649 8.00025 11.4379 8.42742C11.3109 8.85459 11.0006 9.20317 10.591 9.37872C9.31197 9.92686 8.69234 10.6873 8.37361 11.2922ZM10.7501 12.5C10.3359 12.5 10.0001 12.1642 10.0001 11.75C10.0001 11.3358 10.3359 11 10.7501 11C11.1643 11 11.5001 11.3358 11.5001 11.75C11.5001 12.1642 11.1643 12.5 10.7501 12.5ZM15.0001 11.75C15.0001 12.1642 14.6643 12.5 14.2501 12.5C13.8359 12.5 13.5001 12.1642 13.5001 11.75C13.5001 11.3358 13.8359 11 14.2501 11C14.6643 11 15.0001 11.3358 15.0001 11.75ZM10.9474 14.2764C11.0332 14.4479 11.4979 15 12.5002 15C13.5025 15 13.9672 14.4479 14.053 14.2764C14.1765 14.0294 14.4768 13.9293 14.7238 14.0528C14.9708 14.1763 15.0709 14.4766 14.9474 14.7236C14.6998 15.2188 13.8979 16 12.5002 16C11.1025 16 10.3006 15.2188 10.053 14.7236C9.92949 14.4766 10.0296 14.1763 10.2766 14.0528C10.5236 13.9293 10.8239 14.0294 10.9474 14.2764Z"
       />
     </svg>
   ),