feat(Icons): Add new icons to Teams theme (#2156)

* add new icons * add changelog entry * Renamed promote/demote-presenter to presenter and no-presenter. Tweaked shapes to match each other.
microsoft · Dec 10, 2019 · 518c073 · 518c073
1 parent 54699e3
commit 518c073
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add a new experimental @fluentui/react-theming package that includes a `compose()` @kenotron ([#2152](https://github.com/microsoft/fluent-ui-react/pull/2152))
 - Add `closed-captions` icon in Teams theme @codepretty ([#2100](https://github.com/stardust-ui/react/pull/2100))
 
+### Features
+- Add `presenter`, `no-presenter`, `volume-down`, `volume`, `volume-up` icons to Teams theme @codepretty ([#2156](https://github.com/microsoft/fluent-ui-react/pull/2156))
+
 <!--------------------------------[ v0.41.0 ]------------------------------- -->
 ## [v0.41.0](https://github.com/microsoft/fluent-ui-react/tree/v0.41.0) (2019-12-04)
 [Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.40.4...v0.41.0)

diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
@@ -19,6 +19,7 @@ import calendar from './calendar'
 import call from './call'
 import callBlocked from './callBlocked'
 import callParking from './callParking'
+import callControlCloseTray from './callControlCloseTray'
 import callControlRelease from './callControlRelease'
 import callControlRequest from './callControlRequest'
 import callControlPresentNew from './callControlPresentNew'
@@ -104,14 +105,14 @@ import menu from './menu'
 import messageSeen from './messageSeen'
 import mic from './mic'
 import micOff from './micOff'
+import microsoftStream from './microsoftStream'
 import more from './more'
+import noPresenter from './noPresenter'
 import notes from './notes'
 import notificationsMuted from './notificationsMuted'
+import numberList from './numberList'
 import oneDrive from './oneDrive'
-import microsoftStream from './microsoftStream'
 import userPhone from './userPhone'
-import speakerMute from './speakerMute'
-import numberList from './numberList'
 import outdent from './outdent'
 import openOutside from './openOutside'
 import pause from './pause'
@@ -125,6 +126,7 @@ import plugs from './plugs'
 import poll from './poll'
 import presenceAvailable from './presenceAvailable'
 import presenceStroke from './presenceStroke'
+import presenter from './presenter'
 import qna from './qna'
 import questionCircle from './questionCircle'
 import quote from './quote'
@@ -141,7 +143,7 @@ import snooze from './snooze'
 import search from './search'
 import send from './send'
 import settings from './settings'
-import callControlCloseTray from './callControlCloseTray'
+import speakerMute from './speakerMute'
 import star from './star'
 import stardustCircle from './stardustCircle'
 import sticker from './sticker'
@@ -167,6 +169,9 @@ import urgent from './urgent'
 import userBlur from './userBlur'
 import userFriends from './userFriends'
 import videoCameraEmphasis from './videoCameraEmphasis'
+import volume from './volume'
+import volumeDown from './volumeDown'
+import volumeUp from './volumeUp'
 import yammer from './yammer'
 import windowMaximize from './windowMaximize'
 import windowMinimize from './windowMinimize'
@@ -267,6 +272,7 @@ export default {
   menu,
   'message-seen': messageSeen,
   mic,
+  'no-presenter': noPresenter,
   notes,
   'speaker-mute': speakerMute,
   hand,
@@ -289,6 +295,7 @@ export default {
   poll,
   'presence-available': presenceAvailable,
   'presence-stroke': presenceStroke,
+  presenter,
   qna,
   'question-circle': questionCircle,
   quote,
@@ -327,6 +334,9 @@ export default {
   'user-blur': userBlur,
   'user-friends': userFriends,
   'video-camera-emphasis': videoCameraEmphasis,
+  volume,
+  'volume-down': volumeDown,
+  'volume-up': volumeUp,
   'window-maximize': windowMaximize,
   'window-minimize': windowMinimize,
   'window-restore': windowRestore,

diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/noPresenter.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/noPresenter.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <g className={cx(teamsIconClassNames.filled, classes.filledPart)}>
+        <circle cx="16" cy="10" r="2" />
+        <path d="M13,14.5V13h3l-1,1H14v.5a.5.5,0,0,1-.5.5A.51.51,0,0,1,13,14.5Z" />
+        <path d="M9.5,16.5A.5.5,0,0,1,10,16h3l-2,2V17H10A.5.5,0,0,1,9.5,16.5Z" />
+        <path d="M18.5,15a.5.5,0,0,0,.5-.5v-.8l4.85-4.85A.5.5,0,0,0,23.5,8a.49.49,0,0,0-.36.15l-15,15A.5.5,0,0,0,8.5,24a.49.49,0,0,0,.36-.15l.91-.91A.46.46,0,0,0,10,23H22a.5.5,0,0,0,0-1H21V17h1a.5.5,0,0,0,0-1H16.71L18,14.67A.52.52,0,0,0,18.5,15Z" />
+      </g>
+
+      <g className={cx(teamsIconClassNames.outline, classes.outlinePart)}>
+        <path d="M16,12a2,2,0,1,0-2-2A2,2,0,0,0,16,12Zm0-3a1,1,0,1,1-1,1A1,1,0,0,1,16,9Zm-3,5.5V13h3l-1,1H14v.5a.5.5,0,0,1-.5.5A.51.51,0,0,1,13,14.5Zm-3.5,2A.5.5,0,0,1,10,16h3l-2,2V17H10A.5.5,0,0,1,9.5,16.5Zm9-1.5a.5.5,0,0,0,.5-.5v-.8l4.85-4.85A.5.5,0,0,0,23.5,8a.49.49,0,0,0-.36.15l-15,15A.5.5,0,0,0,8.5,24a.49.49,0,0,0,.36-.15l.91-.91A.46.46,0,0,0,10,23H22a.5.5,0,0,0,0-1H21V17h1a.5.5,0,0,0,0-1H16.71L18,14.67A.52.52,0,0,0,18.5,15ZM20,17v5H12V20.7L15.71,17Z" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/presenter.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/presenter.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <g className={cx(teamsIconClassNames.filled, classes.filledPart)}>
+        <path d="M21,22V17h1a.5.5,0,0,0,0-1H10a.5.5,0,0,0,0,1h1v5H10a.5.5,0,0,0,0,1H22a.5.5,0,0,0,0-1Z" />
+        <path d="M16,8a2,2,0,1,0,2,2,2,2,0,0,0-2-2Z" />
+        <path d="M19,13v1.5a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V14H14v.5a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V13Z" />
+      </g>
+
+      <g className={cx(teamsIconClassNames.outline, classes.outlinePart)}>
+        <path d="M21,22V17h1a.5.5,0,0,0,0-1H10a.5.5,0,0,0,0,1h1v5H10a.5.5,0,0,0,0,1H22a.5.5,0,0,0,0-1Zm-9-5h8v5H12Zm4-8a1,1,0,1,1-1,1,1,1,0,0,1,1-1m0-1a2,2,0,1,0,2,2,2,2,0,0,0-2-2Zm3,5v1.5a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V14H14v.5a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V13Z" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/volume.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/volume.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" className={classes.svg} viewBox="8 8 16 16">
+      <g className={cx(teamsIconClassNames.outline, classes.outlinePart)}>
+        <path d="M19.0215,19.7998c-0.1279,0-0.2559-0.0488-0.3535-0.1465c-0.1953-0.1953-0.1953-0.5117,0-0.707 c0.7871-0.7871,1.2207-1.833,1.2207-2.9463c0-1.1128-0.4336-2.1592-1.2207-2.9463c-0.1953-0.1953-0.1953-0.5117,0-0.707 s0.5117-0.1953,0.707,0c0.9766,0.9756,1.5137,2.2729,1.5137,3.6533c0,1.3799-0.5371,2.6777-1.5137,3.6533 C19.2773,19.751,19.1494,19.7998,19.0215,19.7998z" />
+        <path d="M16.8516,10.1484C16.9502,10.2476,17,10.3647,17,10.5v11c0,0.1357-0.0498,0.2529-0.1484,0.3516 C16.752,21.9512,16.6348,22,16.5,22c-0.1094,0-0.209-0.0332-0.2969-0.1016L12.3438,19H9.1953c-0.3545,0-0.6328-0.1973-0.8359-0.5938 c-0.1616-0.3174-0.2656-0.7422-0.3125-1.2734C8.0156,16.7842,8,16.4062,8,16s0.0156-0.7861,0.0469-1.1406 c0.0469-0.5259,0.1509-0.9478,0.3125-1.2656C8.5625,13.1982,8.8408,13,9.1953,13h3.1484l3.8594-2.8984 C16.291,10.0342,16.3906,10,16.5,10C16.6348,10,16.752,10.0498,16.8516,10.1484z M12.8125,13.8984 c-0.0781,0.0576-0.2607,0.0967-0.5469,0.1172c-0.1562,0.0107-0.271,0.0156-0.3438,0.0156h-0.2578 c-0.2656,0-0.6641-0.0049-1.1953-0.0156C9.9375,14.0054,9.5391,14,9.2734,14C9.0908,14.6357,9,15.3022,9,16 c0,0.6934,0.0908,1.3594,0.2734,2c0.2603,0,0.6562-0.0049,1.1875-0.0156c0.5312-0.0098,0.9297-0.0156,1.1953-0.0156h0.2578 c0.25,0,0.4766,0.0156,0.6797,0.0469c0.104,0.0264,0.1768,0.0547,0.2188,0.0859L16,20.5v-9L12.8125,13.8984z" />
+      </g>
+      <g className={cx(teamsIconClassNames.filled, classes.filledPart)}>
+        <path d="M19.0215,19.7998c-0.1279,0-0.2559-0.0488-0.3535-0.1465c-0.1953-0.1953-0.1953-0.5117,0-0.707 c0.7871-0.7871,1.2207-1.833,1.2207-2.9463c0-1.1128-0.4336-2.1592-1.2207-2.9463c-0.1953-0.1953-0.1953-0.5117,0-0.707 s0.5117-0.1953,0.707,0c0.9766,0.9756,1.5137,2.2729,1.5137,3.6533c0,1.3799-0.5371,2.6777-1.5137,3.6533 C19.2773,19.751,19.1494,19.7998,19.0215,19.7998z" />
+        <path d="M16.8516,10.1484C16.9502,10.2476,17,10.3647,17,10.5v11c0,0.1357-0.0498,0.2529-0.1484,0.3516 C16.752,21.9512,16.6348,22,16.5,22c-0.1094,0-0.209-0.0332-0.2969-0.1016L12.3438,19H9.1953c-0.3545,0-0.6328-0.1973-0.8359-0.5938 c-0.1616-0.3174-0.2656-0.7422-0.3125-1.2734C8.0156,16.7842,8,16.4062,8,16s0.0156-0.7861,0.0469-1.1406 c0.0469-0.5259,0.1509-0.9478,0.3125-1.2656C8.5625,13.1982,8.8408,13,9.1953,13h3.1484l3.8594-2.8984 C16.291,10.0342,16.3906,10,16.5,10C16.6348,10,16.752,10.0498,16.8516,10.1484z" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/volumeDown.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/volumeDown.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" className={classes.svg} viewBox="8 8 16 16">
+      <g className={cx(teamsIconClassNames.outline, classes.outlinePart)}>
+        <path d="M16.8516,10.1484C16.9502,10.2476,17,10.3647,17,10.5v11c0,0.1357-0.0498,0.2529-0.1484,0.3516 C16.752,21.9512,16.6348,22,16.5,22c-0.1094,0-0.209-0.0332-0.2969-0.1016L12.3438,19H9.1953c-0.3545,0-0.6328-0.1973-0.8359-0.5938 c-0.1616-0.3174-0.2656-0.7422-0.3125-1.2734C8.0156,16.7842,8,16.4062,8,16s0.0156-0.7861,0.0469-1.1406 c0.0469-0.5259,0.1509-0.9478,0.3125-1.2656C8.5625,13.1982,8.8408,13,9.1953,13h3.1484l3.8594-2.8984 C16.291,10.0342,16.3906,10,16.5,10C16.6348,10,16.752,10.0498,16.8516,10.1484z M12.8125,13.8984 c-0.0781,0.0576-0.2607,0.0967-0.5469,0.1172c-0.1562,0.0107-0.271,0.0156-0.3438,0.0156h-0.2578 c-0.2656,0-0.6641-0.0049-1.1953-0.0156C9.9375,14.0054,9.5391,14,9.2734,14C9.0908,14.6357,9,15.3022,9,16 c0,0.6934,0.0908,1.3594,0.2734,2c0.2603,0,0.6562-0.0049,1.1875-0.0156c0.5312-0.0098,0.9297-0.0156,1.1953-0.0156h0.2578 c0.25,0,0.4766,0.0156,0.6797,0.0469c0.104,0.0264,0.1768,0.0547,0.2188,0.0859L16,20.5v-9L12.8125,13.8984z" />
+      </g>
+      <g className={cx(teamsIconClassNames.filled, classes.filledPart)}>
+        <path d="M16.8516,10.1484C16.9502,10.2476,17,10.3647,17,10.5v11c0,0.1357-0.0498,0.2529-0.1484,0.3516 C16.752,21.9512,16.6348,22,16.5,22c-0.1094,0-0.209-0.0332-0.2969-0.1016L12.3438,19H9.1953c-0.3545,0-0.6328-0.1973-0.8359-0.5938 c-0.1616-0.3174-0.2656-0.7422-0.3125-1.2734C8.0156,16.7842,8,16.4062,8,16s0.0156-0.7861,0.0469-1.1406 c0.0469-0.5259,0.1509-0.9478,0.3125-1.2656C8.5625,13.1982,8.8408,13,9.1953,13h3.1484l3.8594-2.8984 C16.291,10.0342,16.3906,10,16.5,10C16.6348,10,16.752,10.0498,16.8516,10.1484z" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/volumeUp.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/volumeUp.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" className={classes.svg} viewBox="8 8 16 16">
+      <g className={cx(teamsIconClassNames.outline, classes.outlinePart)}>
+        <path d="M19.0215,19.7998c-0.1279,0-0.2559-0.0488-0.3535-0.1465c-0.1953-0.1953-0.1953-0.5117,0-0.707 c0.7871-0.7871,1.2207-1.833,1.2207-2.9463c0-1.1128-0.4336-2.1592-1.2207-2.9463c-0.1953-0.1953-0.1953-0.5117,0-0.707 s0.5117-0.1953,0.707,0c0.9766,0.9756,1.5137,2.2729,1.5137,3.6533c0,1.3799-0.5371,2.6777-1.5137,3.6533 C19.2773,19.751,19.1494,19.7998,19.0215,19.7998z" />
+        <path d="M21.2217,22c-0.1279,0-0.2559-0.0488-0.3535-0.1465c-0.1953-0.1953-0.1953-0.5117,0-0.707C22.2432,19.7715,23,17.9443,23,16 c0-1.9438-0.7568-3.772-2.1318-5.1465c-0.1953-0.1953-0.1953-0.5117,0-0.707s0.5117-0.1953,0.707,0C23.1387,11.71,24,13.7891,24,16 c0,2.2119-0.8613,4.29-2.4248,5.8535C21.4775,21.9512,21.3496,22,21.2217,22z" />
+        <path d="M16.8516,10.1484C16.9502,10.2476,17,10.3647,17,10.5v11c0,0.1357-0.0498,0.2529-0.1484,0.3516 C16.752,21.9512,16.6348,22,16.5,22c-0.1094,0-0.209-0.0332-0.2969-0.1016L12.3438,19H9.1953c-0.3545,0-0.6328-0.1973-0.8359-0.5938 c-0.1616-0.3174-0.2656-0.7422-0.3125-1.2734C8.0156,16.7842,8,16.4062,8,16s0.0156-0.7861,0.0469-1.1406 c0.0469-0.5259,0.1509-0.9478,0.3125-1.2656C8.5625,13.1982,8.8408,13,9.1953,13h3.1484l3.8594-2.8984 C16.291,10.0342,16.3906,10,16.5,10C16.6348,10,16.752,10.0498,16.8516,10.1484z M12.8125,13.8984 c-0.0781,0.0576-0.2607,0.0967-0.5469,0.1172c-0.1562,0.0107-0.271,0.0156-0.3438,0.0156h-0.2578 c-0.2656,0-0.6641-0.0049-1.1953-0.0156C9.9375,14.0054,9.5391,14,9.2734,14C9.0908,14.6357,9,15.3022,9,16 c0,0.6934,0.0908,1.3594,0.2734,2c0.2603,0,0.6562-0.0049,1.1875-0.0156c0.5312-0.0098,0.9297-0.0156,1.1953-0.0156h0.2578 c0.25,0,0.4766,0.0156,0.6797,0.0469c0.104,0.0264,0.1768,0.0547,0.2188,0.0859L16,20.5v-9L12.8125,13.8984z" />
+      </g>
+      <g className={cx(teamsIconClassNames.filled, classes.filledPart)}>
+        <path d="M19.0215,19.7998c-0.1279,0-0.2559-0.0488-0.3535-0.1465c-0.1953-0.1953-0.1953-0.5117,0-0.707 c0.7871-0.7871,1.2207-1.833,1.2207-2.9463c0-1.1128-0.4336-2.1592-1.2207-2.9463c-0.1953-0.1953-0.1953-0.5117,0-0.707 s0.5117-0.1953,0.707,0c0.9766,0.9756,1.5137,2.2729,1.5137,3.6533c0,1.3799-0.5371,2.6777-1.5137,3.6533 C19.2773,19.751,19.1494,19.7998,19.0215,19.7998z" />
+        <path d="M21.2217,22c-0.1279,0-0.2559-0.0488-0.3535-0.1465c-0.1953-0.1953-0.1953-0.5117,0-0.707C22.2432,19.7715,23,17.9443,23,16 c0-1.9438-0.7568-3.772-2.1318-5.1465c-0.1953-0.1953-0.1953-0.5117,0-0.707s0.5117-0.1953,0.707,0C23.1387,11.71,24,13.7891,24,16 c0,2.2119-0.8613,4.29-2.4248,5.8535C21.4775,21.9512,21.3496,22,21.2217,22z" />
+        <path d="M16.8516,10.1484C16.9502,10.2476,17,10.3647,17,10.5v11c0,0.1357-0.0498,0.2529-0.1484,0.3516 C16.752,21.9512,16.6348,22,16.5,22c-0.1094,0-0.209-0.0332-0.2969-0.1016L12.3438,19H9.1953c-0.3545,0-0.6328-0.1973-0.8359-0.5938 c-0.1616-0.3174-0.2656-0.7422-0.3125-1.2734C8.0156,16.7842,8,16.4062,8,16s0.0156-0.7861,0.0469-1.1406 c0.0469-0.5259,0.1509-0.9478,0.3125-1.2656C8.5625,13.1982,8.8408,13,9.1953,13h3.1484l3.8594-2.8984 C16.291,10.0342,16.3906,10,16.5,10C16.6348,10,16.752,10.0498,16.8516,10.1484z" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsSvgIconSpec