microsoft · codepretty · Mar 8, 2019 · Feb 20, 2019 · Mar 5, 2019 · Mar 6, 2019
@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add `inline` prop in the `Popup` for rendering the content next to the trigger element @mnajdova ([#1017](https://github.com/stardust-ui/react/pull/1017))
 - Export `call-pstn` and `skype-logo` SVG icons to the Teams theme @thewulf7([#929](https://github.com/stardust-ui/react/pull/968))
+- Export some Office brand SVG icons to the Teams theme, including `word`, `word-color`, `excel`, `excel-color`, `powerpoint`, `powerpoint-color`, `onenote`, `onenote-color` @codepretty ([#938](https://github.com/stardust-ui/react/pull/938))
 
 ### Documentation
 - Add disabled state to menu as toolbar doc example @codepretty ([#933](https://github.com/stardust-ui/react/pull/933))

@@ -3,9 +3,9 @@ import { Attachment } from '@stardust-ui/react'
 
 const AttachmentIconExampleShorthand = () => (
   <div>
-    <Attachment icon="file word outline" header="MeetingNotes.pptx" />
-    <Attachment icon="file excel outline" header="Budget.pptx" />
-    <Attachment icon="file powerpoint outline" header="Presentation.pptx" />
+    <Attachment icon="word-color" header="MeetingNotes.docx" />
+    <Attachment icon="excel-color" header="Budget.xlsx" />
+    <Attachment icon="powerpoint-color" header="Presentation.pptx" />
   </div>
 )
 

@@ -2,8 +2,21 @@ import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
-  { key: 'editorials', content: 'Editorials' },
-  { key: 'review', content: 'Reviews' },
+  {
+    key: 'editorials',
+    content: 'Editorials',
+    icon: {
+      name: 'bookmark',
+      outline: true,
+    },
+  },
+  {
+    key: 'review',
+    content: 'Reviews',
+    icon: {
+      name: 'word',
+    },
+  },
   { key: 'events', content: 'Upcoming Events' },
 ]
 

@@ -10,4 +10,5 @@ export default {
     </svg>
   ),
   styles: {},
+  exportedAs: 'onenote, onenote-color',
 } as TeamsProcessedSvgIconSpec
@@ -8,4 +8,5 @@ export default {
     </svg>
   ),
   styles: {},
+  exportedAs: 'powerpoint, powerpoint-color',
 } as TeamsProcessedSvgIconSpec
@@ -8,4 +8,5 @@ export default {
     </svg>
   ),
   styles: {},
+  exportedAs: 'word, word-color',
 } as TeamsProcessedSvgIconSpec
@@ -10,4 +10,5 @@ export default {
     </svg>
   ),
   styles: {},
+  exportedAs: 'excel, excel-color',
 } as TeamsProcessedSvgIconSpec
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <path d="M8.5,10.4766l9-2.0781v15.2031l-9-2.0781V10.4766z M12.0156,16.0938l-1.5469,2.8984l1.2969,0.0703l0.8672-1.8984c0.0049-0.0156,0.0142-0.043,0.0273-0.082c0.0127-0.0391,0.0259-0.0801,0.0391-0.125c0.0127-0.0439,0.0244-0.0859,0.0352-0.125c0.0103-0.0391,0.0156-0.0664,0.0156-0.082h0.0156c0.0103,0.042,0.0195,0.084,0.0273,0.125c0.0078,0.042,0.0166,0.084,0.0273,0.125c0.0049,0.0469,0.0234,0.0996,0.0547,0.1562l0.9062,2.0234l1.4609,0.0859l-1.6875-3.1953l1.6406-3.1406l-1.375,0.0781l-0.8359,1.8594c-0.042,0.0835-0.0732,0.1709-0.0938,0.2617c-0.021,0.0913-0.0444,0.1812-0.0703,0.2695h-0.0156c-0.0156-0.0884-0.0381-0.1758-0.0664-0.2617c-0.0288-0.0859-0.0586-0.168-0.0898-0.2461l-0.7188-1.7656l-1.3359,0.0703L12.0156,16.0938z M22.9609,10c0.041,0,0.0938,0.0195,0.1562,0.0586s0.1221,0.0859,0.1797,0.1406c0.0566,0.0547,0.1064,0.1123,0.1484,0.1719c0.041,0.0601,0.0625,0.1133,0.0625,0.1602v10.6328c0,0.0469-0.0215,0.0918-0.0625,0.1328c-0.042,0.042-0.0928,0.0781-0.1523,0.1094c-0.0605,0.0312-0.1211,0.0566-0.1836,0.0742c-0.0625,0.0186-0.1123,0.0273-0.1484,0.0273H18v-1.0156h1.5078v-1.4844H18v-0.5156h1.5078v-1.4844H18v-0.5156h1.5078v-1.4844H18v-0.5156h1.5078v-1.4844H18v-0.5156h1.5078v-1.4844H18V10H22.9609z M22.4922,11.0078H20v1.4844h2.4922V11.0078z M22.4922,13.0078H20v1.4844h2.4922V13.0078z M22.4922,15.0078H20v1.4844h2.4922V15.0078z M22.4922,17.0078H20v1.4844h2.4922V17.0078z M22.4922,19.0078H20v1.4844h2.4922V19.0078z" />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
@@ -0,0 +1,97 @@
+import * as React from 'react'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="0 0 32 32" className={classes.svg}>
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="5.08"
+          y1="3.61"
+          x2="27.96"
+          y2="30.87"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#fff" stop-opacity="0" />
+          <stop offset=".86" stop-color="#5e5e5e" stop-opacity=".06" />
+          <stop offset="1" stop-opacity=".1" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-2"
+          x1="22.15"
+          y1="9.1"
+          x2="26.11"
+          y2="5.14"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#fff" stop-opacity="0" />
+          <stop offset=".45" stop-color="#fff" stop-opacity=".01" />
+          <stop offset=".64" stop-color="#fff" stop-opacity=".04" />
+          <stop offset=".78" stop-color="#fff" stop-opacity=".08" />
+          <stop offset=".89" stop-color="#fff" stop-opacity=".15" />
+          <stop offset=".99" stop-color="#fff" stop-opacity=".24" />
+          <stop offset="1" stop-color="#fff" stop-opacity=".25" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-3"
+          x1="9.5"
+          y1="26.44"
+          x2="9.5"
+          y2="9.53"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#fff" stop-opacity="0" />
+          <stop offset=".53" stop-color="#fff" stop-opacity=".01" />
+          <stop offset=".72" stop-color="#fff" stop-opacity=".03" />
+          <stop offset=".85" stop-color="#fff" stop-opacity=".08" />
+          <stop offset=".96" stop-color="#fff" stop-opacity=".15" />
+          <stop offset="1" stop-color="#fff" stop-opacity=".18" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-4"
+          x1="11.28"
+          y1="29.35"
+          x2="11.62"
+          y2="26.21"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#828282" stop-opacity="0" />
+          <stop offset=".86" stop-color="#303030" stop-opacity=".13" />
+          <stop offset="1" stop-opacity=".2" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-5"
+          x1="25"
+          y1="10.94"
+          x2="25"
+          y2="9.06"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#828282" stop-opacity="0" />
+          <stop offset=".86" stop-color="#303030" stop-opacity=".06" />
+          <stop offset="1" stop-opacity=".1" />
+        </linearGradient>
+      </defs>
+      <g>
+        <path fill="#fff" d="M28 29H8V3h15l5 5v21z" />
+        <path fill="#a6a6a6" d="M23 2H7v28h22V8zm0 1.5L27.5 8H23zM28 29H8V3h14v6h6z" />
+        <path
+          fill="#c8c8c8"
+          d="M22 23h4v1h-4zM22 25h4v1h-4zM22 19h4v1h-4zM22 21h4v1h-4zM22 15h4v1h-4zM22 17h4v1h-4zM22 11h4v1h-4zM22 13h4v1h-4zM17 23h4v1h-4zM17 25h4v1h-4zM17 19h4v1h-4zM17 21h4v1h-4zM17 15h4v1h-4zM17 17h4v1h-4zM17 11h4v1h-4zM17 13h4v1h-4z"
+        />
+        <path fill="#008641" d="M3 11l13-2v18L3 25V11z" />
+        <path
+          fill="#fff"
+          d="M13 22h-2l-1.3-2.61a2.39 2.39 0 0 1-.15-.54 4.23 4.23 0 0 1-.17.56L8 22H6l2.41-4-2.2-4h2.07l1.08 2.4a4.31 4.31 0 0 1 .23.68q.06-.23.24-.7L11 14h1.9l-2.26 4z"
+        />
+        <path fill="url(#linear-gradient)" d="M29 8l-6-6H7v28h22z" />
+        <path fill="url(#linear-gradient-2)" d="M7 2v1h15v6h6v15.5h1V8l-6-6H7z" />
+        <path fill="url(#linear-gradient-3)" d="M16 9L3 11v14l13 2V9z" />
+        <path fill="url(#linear-gradient-4)" d="M16 29H7v-3.38L16 27v2z" />
+        <path fill="url(#linear-gradient-5)" d="M22 9h6v2h-6z" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <path d="M9 10.398l8-1.351v13.906l-8-1.352V10.398zm2.227 8.086l.796.04V15c0-.031.005-.06.016-.086a.21.21 0 0 0 .016-.078.058.058 0 0 0 .039.043c.02.008.036.022.047.043a4.335 4.335 0 0 0 .171.344l1.829 3.375 1.062.062v-5.547l-.992.063v3.523a.82.82 0 0 0 .031.227h-.016a42.727 42.727 0 0 0-.976-1.824c-.339-.597-.675-1.2-1.008-1.809l-1.016.04v5.108zM23 13.836c0 .068-.008.112-.023.133-.016.02-.061.031-.133.031H22v7.102a.544.544 0 0 1-.074.254.415.415 0 0 1-.086.101.17.17 0 0 1-.113.043H17.5V20h3v-.5h-3v-1h3V18h-3v-1h3v-.5h-3v-1h3V15h-3v-1h3v-.5h-3v-1h3V12h-3v-1.5h4.227c.103 0 .175.044.214.133.04.089.059.177.059.265v.602h.844c.072 0 .117.01.133.027.015.019.023.064.023.137v2.172zm-.203.664c.067 0 .118.033.152.098a.41.41 0 0 1 .051.183v1.938c0 .057-.018.119-.05.183-.035.066-.086.098-.153.098H22.5v-2.5h.297zm0 3c.067 0 .118.033.152.098.033.065.051.127.051.183v1.938c0 .057-.018.119-.05.183-.035.066-.086.098-.153.098H22.5v-2.5h.297z" />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
@@ -0,0 +1,88 @@
+import * as React from 'react'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="0 0 32 32" className={classes.svg}>
+      <defs>
+        <linearGradient
+          id="onenote-1"
+          x1="6.0695"
+          x2="28.1195"
+          y1="29.2192"
+          y2="2.9393"
+          gradientTransform="matrix(1 0 0 -1 0 32)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#fff" stop-opacity="0" />
+          <stop offset=".86" stop-color="#5e5e5e" stop-opacity=".06" />
+          <stop offset="1" stop-opacity=".1" />
+        </linearGradient>
+        <linearGradient
+          id="onenote-2"
+          x1="9.5"
+          x2="9.5"
+          y1="5.56"
+          y2="22.47"
+          gradientTransform="matrix(1 0 0 -1 0 32)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#fff" stop-opacity="0" />
+          <stop offset=".53" stop-color="#fff" stop-opacity=".01" />
+          <stop offset=".72" stop-color="#fff" stop-opacity=".03" />
+          <stop offset=".85" stop-color="#fff" stop-opacity=".08" />
+          <stop offset=".96" stop-color="#fff" stop-opacity=".15" />
+          <stop offset="1" stop-color="#fff" stop-opacity=".18" />
+        </linearGradient>
+        <linearGradient
+          id="onenote-3"
+          x1="11.2791"
+          x2="11.6191"
+          y1="2.6501"
+          y2="5.7901"
+          gradientTransform="matrix(1 0 0 -1 0 32)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#828282" stop-opacity="0" />
+          <stop offset=".86" stop-color="#303030" stop-opacity=".13" />
+          <stop offset="1" stop-opacity=".2" />
+        </linearGradient>
+        <linearGradient
+          id="onenote-4"
+          x1="22.52"
+          x2="30.44"
+          y1="21.52"
+          y2="29.44"
+          gradientTransform="matrix(1 0 0 -1 0 32)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#fff" stop-opacity="0" />
+          <stop offset=".45" stop-color="#fff" stop-opacity=".01" />
+          <stop offset=".64" stop-color="#fff" stop-opacity=".04" />
+          <stop offset=".78" stop-color="#fff" stop-opacity=".08" />
+          <stop offset=".89" stop-color="#fff" stop-opacity=".15" />
+          <stop offset=".99" stop-color="#fff" stop-opacity=".24" />
+          <stop offset="1" stop-color="#fff" stop-opacity=".25" />
+        </linearGradient>
+      </defs>
+      <g>
+        <path fill="#fff" d="M7.5 2.5h19v2h2v5h-2v20h-19z" />
+        <path fill="#a6a6a6" d="M26 3v2h2v4h-2v20H8V3h18m1-1H7v28h20V10h2V4h-2V2z" />
+        <path fill="#7719aa" d="M3 11l13-2v18L3 25z" />
+        <path
+          fill="#fff"
+          d="M13 22h-1.77L8 17c-.1415-.213-.2716-.4333-.39-.66V22H6v-8h1.89L11 18.87c.14.22.27.4367.39.65-.023-.3663-.023-.7337 0-1.1V14H13v8z"
+        />
+        <path
+          fill="#c8c8c8"
+          d="M16 11h8v1h-8zM16 13h8v1h-8zM16 15h8v1h-8zM16 17h8v1h-8zM16 19h8v1h-8zM16 21h8v1h-8zM16 23h8v1h-8zM16 25h8v1h-8zM10 5h6v1h-6z"
+        />
+        <path fill="url(#onenote-1)" d="M27 2H7v28h20V10h2V4h-2V2z" />
+        <path fill="url(#onenote-2)" d="M16 9L3 11v14l13 2z" />
+        <path fill="url(#onenote-3)" d="M16 29H7v-3.38L16 27z" />
+        <path fill="url(#onenote-4)" d="M26 3v2h2v4h-2v20H8V3h18m1-1H7v28h20V10h2V4h-2V2z" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <path d="M8.5 10.477l9-2.079v15.204l-9-2.079V10.477zM11 19.03l1.164.133V17l.578-.04c.078-.004.156-.007.235-.007s.158-.005.242-.016a1.924 1.924 0 0 0 1.289-.722c.15-.19.267-.406.348-.649.08-.242.12-.496.12-.761 0-.62-.152-1.103-.456-1.45-.305-.346-.778-.519-1.418-.519-.35 0-.7.013-1.051.04-.352.026-.702.049-1.05.07v6.085zm2.625-4.148c0 .328-.081.578-.242.75-.162.172-.41.258-.742.258h-.477V14c.088-.01.18-.023.273-.04s.188-.023.282-.023c.312 0 .541.083.687.247.146.164.219.397.219.699zM23 10.5c.052 0 .106.017.164.05a.858.858 0 0 1 .285.286c.033.058.051.112.051.164v10a.327.327 0 0 1-.05.164.82.82 0 0 1-.286.285.323.323 0 0 1-.164.051h-5V20h4v-.5h-4v-1h4V18h-4v-1.781c.15.089.31.158.48.207a1.944 1.944 0 0 0 1.297-.082A2.007 2.007 0 0 0 21 14.5h-2v-2c-.178 0-.35.025-.52.074-.17.05-.33.119-.48.207V10.5h5zM21.5 14c0-.276-.053-.535-.156-.777a2.032 2.032 0 0 0-1.066-1.066A1.95 1.95 0 0 0 19.5 12v2h2z" />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
@@ -0,0 +1,101 @@
+import * as React from 'react'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="0 0 32 32" className={classes.svg}>
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="5.08"
+          y1="3.61"
+          x2="27.96"
+          y2="30.87"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#fff" stop-opacity="0" />
+          <stop offset="0.86" stop-color="#5e5e5e" stop-opacity="0.06" />
+          <stop offset="1" stop-opacity="0.1" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-2"
+          x1="22.15"
+          y1="9.1"
+          x2="26.11"
+          y2="5.14"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#fff" stop-opacity="0" />
+          <stop offset="0.45" stop-color="#fff" stop-opacity="0.01" />
+          <stop offset="0.64" stop-color="#fff" stop-opacity="0.04" />
+          <stop offset="0.78" stop-color="#fff" stop-opacity="0.08" />
+          <stop offset="0.89" stop-color="#fff" stop-opacity="0.15" />
+          <stop offset="0.99" stop-color="#fff" stop-opacity="0.24" />
+          <stop offset="1" stop-color="#fff" stop-opacity="0.25" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-3"
+          x1="9.5"
+          y1="26.44"
+          x2="9.5"
+          y2="9.53"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#fff" stop-opacity="0" />
+          <stop offset="0.53" stop-color="#fff" stop-opacity="0.01" />
+          <stop offset="0.72" stop-color="#fff" stop-opacity="0.03" />
+          <stop offset="0.85" stop-color="#fff" stop-opacity="0.08" />
+          <stop offset="0.96" stop-color="#fff" stop-opacity="0.15" />
+          <stop offset="1" stop-color="#fff" stop-opacity="0.18" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-4"
+          x1="11.28"
+          y1="29.35"
+          x2="11.62"
+          y2="26.21"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#828282" stop-opacity="0" />
+          <stop offset="0.86" stop-color="#303030" stop-opacity="0.13" />
+          <stop offset="1" stop-opacity="0.2" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-5"
+          x1="25"
+          y1="10.94"
+          x2="25"
+          y2="9.06"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#828282" stop-opacity="0" />
+          <stop offset="0.86" stop-color="#303030" stop-opacity="0.06" />
+          <stop offset="1" stop-opacity="0.1" />
+        </linearGradient>
+      </defs>
+      <g>
+        <polygon fill="#fff" points="28 29 8 29 8 3 23 3 28 8 28 29" />
+        <path fill="#f5ba9d" d="M19,7a5,5,0,0,1,5,5H19Z" />
+        <path fill="#a6a6a6" d="M23,2H7V30H29V8Zm0,1.5L27.5,8H23ZM28,29H8V3H22V9h6Z" />
+        <path fill="#c8c8c8" d="M24,13a6,6,0,1,1-6-6v6Z" />
+        <rect fill="#c8c8c8" x="16" y="23" width="10" height="1" />
+        <rect fill="#c8c8c8" x="16" y="21" width="10" height="1" />
+        <rect fill="#c8c8c8" x="16" y="25" width="10" height="1" />
+        <polygon fill="#f04e23" points="3 11 16 9 16 27 3 25 3 11" />
+        <path
+          fill="#fff"
+          d="M8.85,19.24V22H7V14H9.9Q13,14,13,16.55a2.42,2.42,0,0,1-.89,1.95,3.59,3.59,0,0,1-2.38.74Zm0-3.86v2.49h.73q1.48,0,1.48-1.26T9.58,15.38Z"
+        />
+        <path fill="url(#linear-gradient)" d="M29,8,23,2H7V30H29Z" />
+        <polygon
+          fill="url(#linear-gradient-2)"
+          points="7 2 7 3 22 3 22 9 28 9 28 24.5 29 24.5 29 8 23 2 7 2"
+        />
+        <polygon fill="url(#linear-gradient-3)" points="16 9 3 11 3 25 16 27 16 9" />
+        <polygon fill="url(#linear-gradient-4)" points="16 29 7 29 7 25.62 16 27 16 29" />
+        <rect fill="url(#linear-gradient-5)" x="22" y="9" width="6" height="2" />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec