@od-oneapp/uni-icons 2026.1.1301
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +27 -0
- package/dist/index.mjs +113 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +52 -0
- package/src/custom-icon.tsx +20 -0
- package/src/index.ts +4 -0
- package/src/microsoft-icon.tsx +67 -0
- package/src/teams-icon.tsx +68 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
|
|
2
|
+
import { LucideProps } from "lucide-react";
|
|
3
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
export * from "lucide-react";
|
|
6
|
+
|
|
7
|
+
//#region src/custom-icon.d.ts
|
|
8
|
+
declare const CustomIcon: ({
|
|
9
|
+
className,
|
|
10
|
+
...props
|
|
11
|
+
}: LucideProps) => react_jsx_runtime0.JSX.Element;
|
|
12
|
+
//#endregion
|
|
13
|
+
//#region src/microsoft-icon.d.ts
|
|
14
|
+
declare function MicrosoftIcon({
|
|
15
|
+
className,
|
|
16
|
+
...props
|
|
17
|
+
}: React.SVGProps<SVGSVGElement>): react_jsx_runtime0.JSX.Element;
|
|
18
|
+
//#endregion
|
|
19
|
+
//#region src/teams-icon.d.ts
|
|
20
|
+
declare function TeamsIcon({
|
|
21
|
+
className,
|
|
22
|
+
'aria-label': ariaLabel,
|
|
23
|
+
...props
|
|
24
|
+
}: React.SVGProps<SVGSVGElement>): react_jsx_runtime0.JSX.Element;
|
|
25
|
+
//#endregion
|
|
26
|
+
export { CustomIcon, MicrosoftIcon, TeamsIcon };
|
|
27
|
+
//# sourceMappingURL=index.d.mts.map
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import "lucide-react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import "react";
|
|
5
|
+
|
|
6
|
+
export * from "lucide-react"
|
|
7
|
+
|
|
8
|
+
//#region src/custom-icon.tsx
|
|
9
|
+
const CustomIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs("svg", {
|
|
10
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
11
|
+
width: "24",
|
|
12
|
+
height: "24",
|
|
13
|
+
viewBox: "0 0 24 24",
|
|
14
|
+
fill: "none",
|
|
15
|
+
stroke: "currentColor",
|
|
16
|
+
strokeWidth: "2",
|
|
17
|
+
strokeLinecap: "round",
|
|
18
|
+
strokeLinejoin: "round",
|
|
19
|
+
className,
|
|
20
|
+
...props,
|
|
21
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
22
|
+
cx: "12",
|
|
23
|
+
cy: "12",
|
|
24
|
+
r: "10"
|
|
25
|
+
}), /* @__PURE__ */ jsx("path", { d: "M8 12h8" })]
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region src/microsoft-icon.tsx
|
|
30
|
+
/**
|
|
31
|
+
* Microsoft Icon component that renders the official Microsoft logo
|
|
32
|
+
*
|
|
33
|
+
* @param props - Standard SVG element properties
|
|
34
|
+
* @param props.className - Optional CSS classes (defaults to "mr-2 h-4 w-4")
|
|
35
|
+
* @returns SVG element displaying the Microsoft logo with brand colors
|
|
36
|
+
*/
|
|
37
|
+
function MicrosoftIcon({ className = "mr-2 h-4 w-4", ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
39
|
+
viewBox: "0 0 23 23",
|
|
40
|
+
className,
|
|
41
|
+
...props,
|
|
42
|
+
children: [
|
|
43
|
+
/* @__PURE__ */ jsx("path", {
|
|
44
|
+
fill: "#f3f3f3",
|
|
45
|
+
d: "M0 0h23v23H0z"
|
|
46
|
+
}),
|
|
47
|
+
/* @__PURE__ */ jsx("path", {
|
|
48
|
+
fill: "#f35325",
|
|
49
|
+
d: "M1 1h10v10H1z"
|
|
50
|
+
}),
|
|
51
|
+
/* @__PURE__ */ jsx("path", {
|
|
52
|
+
fill: "#81bc06",
|
|
53
|
+
d: "M12 1h10v10H12z"
|
|
54
|
+
}),
|
|
55
|
+
/* @__PURE__ */ jsx("path", {
|
|
56
|
+
fill: "#05a6f0",
|
|
57
|
+
d: "M1 12h10v10H1z"
|
|
58
|
+
}),
|
|
59
|
+
/* @__PURE__ */ jsx("path", {
|
|
60
|
+
fill: "#ffba08",
|
|
61
|
+
d: "M12 12h10v10H12z"
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region src/teams-icon.tsx
|
|
69
|
+
/**
|
|
70
|
+
* Microsoft Teams Icon component that renders the official Teams logo
|
|
71
|
+
*
|
|
72
|
+
* Accepts all standard SVG element properties. Supports:
|
|
73
|
+
* - className: Optional CSS classes (defaults to "mr-2 h-4 w-4")
|
|
74
|
+
* - aria-label: Accessible label (defaults to "Microsoft Teams")
|
|
75
|
+
*
|
|
76
|
+
* @param props - Standard SVG element properties
|
|
77
|
+
* @returns SVG element displaying the Microsoft Teams logo with brand colors
|
|
78
|
+
*/
|
|
79
|
+
function TeamsIcon({ className = "mr-2 h-4 w-4", "aria-label": ariaLabel = "Microsoft Teams", ...props }) {
|
|
80
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
81
|
+
viewBox: "0 0 24 24",
|
|
82
|
+
className,
|
|
83
|
+
role: "img",
|
|
84
|
+
"aria-label": ariaLabel,
|
|
85
|
+
...props,
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsx("path", {
|
|
88
|
+
fill: "#5059C9",
|
|
89
|
+
d: "M19.5 9h-7a1.5 1.5 0 0 0-1.5 1.5v7c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5z"
|
|
90
|
+
}),
|
|
91
|
+
/* @__PURE__ */ jsx("path", {
|
|
92
|
+
fill: "#7B83EB",
|
|
93
|
+
d: "M16 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"
|
|
94
|
+
}),
|
|
95
|
+
/* @__PURE__ */ jsx("path", {
|
|
96
|
+
fill: "#7B83EB",
|
|
97
|
+
d: "M9.5 9H5a1.5 1.5 0 0 0-1.5 1.5v7c0 .83.67 1.5 1.5 1.5h4.5c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5z"
|
|
98
|
+
}),
|
|
99
|
+
/* @__PURE__ */ jsx("path", {
|
|
100
|
+
fill: "#5059C9",
|
|
101
|
+
d: "M7.25 4a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5z"
|
|
102
|
+
}),
|
|
103
|
+
/* @__PURE__ */ jsx("path", {
|
|
104
|
+
fill: "#7B83EB",
|
|
105
|
+
d: "M21 7.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"
|
|
106
|
+
})
|
|
107
|
+
]
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
//#endregion
|
|
112
|
+
export { CustomIcon, MicrosoftIcon, TeamsIcon };
|
|
113
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/custom-icon.tsx","../src/microsoft-icon.tsx","../src/teams-icon.tsx"],"sourcesContent":["import { type LucideProps } from 'lucide-react';\n\nexport const CustomIcon = ({ className, ...props }: LucideProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={className}\n {...props}\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M8 12h8\" />\n </svg>\n);\n","/**\n * @fileoverview Microsoft Icon Component - Displays the official Microsoft logo with brand colors\n *\n * This component renders the Microsoft logo as an SVG with its distinctive four-square design.\n * The icon uses official Microsoft brand colors and maintains proper aspect ratio across all sizes.\n *\n * ## Use Cases\n *\n * 1. **OAuth Authentication**: Display Microsoft sign-in button for Azure AD/Entra ID authentication\n * 2. **Social Login**: Show Microsoft as an option alongside Google, GitHub, etc. in auth flows\n * 3. **Integration Cards**: Indicate Microsoft service integrations (Teams, Office 365, OneDrive)\n * 4. **Account Connection**: Display connected Microsoft accounts in user profile settings\n * 5. **Service Provider Lists**: Show Microsoft in lists of supported third-party services\n * 6. **Admin Dashboards**: Indicate Microsoft SSO configuration status in enterprise settings\n * 7. **API Documentation**: Mark Microsoft Graph API endpoints or Microsoft-specific features\n * 8. **Marketplace Listings**: Display Microsoft-related apps, extensions, or integrations\n * 9. **Activity Feeds**: Show Microsoft service activity (file shared from OneDrive, Teams message)\n * 10. **Branding Elements**: Include Microsoft logo in partner/sponsor sections or footer links\n *\n * @example\n * ```tsx\n * // Basic usage in a sign-in button\n * <button className=\"flex items-center\">\n * <MicrosoftIcon />\n * Sign in with Microsoft\n * </button>\n * ```\n *\n * @example\n * ```tsx\n * // Custom size and styling\n * <MicrosoftIcon className=\"h-8 w-8\" />\n * ```\n *\n * @example\n * ```tsx\n * // Integration card\n * <div className=\"flex items-center gap-2\">\n * <MicrosoftIcon className=\"h-6 w-6\" />\n * <span>Microsoft Teams Connected</span>\n * </div>\n * ```\n */\n\nimport * as React from 'react';\n\n/**\n * Microsoft Icon component that renders the official Microsoft logo\n *\n * @param props - Standard SVG element properties\n * @param props.className - Optional CSS classes (defaults to \"mr-2 h-4 w-4\")\n * @returns SVG element displaying the Microsoft logo with brand colors\n */\nexport function MicrosoftIcon({\n className = 'mr-2 h-4 w-4',\n ...props\n}: React.SVGProps<SVGSVGElement>) {\n return (\n <svg viewBox=\"0 0 23 23\" className={className} {...props}>\n <path fill=\"#f3f3f3\" d=\"M0 0h23v23H0z\" />\n <path fill=\"#f35325\" d=\"M1 1h10v10H1z\" />\n <path fill=\"#81bc06\" d=\"M12 1h10v10H12z\" />\n <path fill=\"#05a6f0\" d=\"M1 12h10v10H1z\" />\n <path fill=\"#ffba08\" d=\"M12 12h10v10H12z\" />\n </svg>\n );\n}\n","/**\n * @fileoverview Microsoft Teams Icon Component\n *\n * This component renders the Microsoft Teams logo as an SVG with official brand colors.\n * The icon maintains proper aspect ratio across all sizes and includes accessibility attributes.\n *\n * ## Use Cases\n *\n * 1. **Teams Integration Status**: Show Teams connection status in app settings\n * 2. **Activity Indicators**: Display Teams-related activity in notifications\n * 3. **Quick Actions**: Indicate Teams-specific actions in menus\n * 4. **OAuth Buttons**: Show Teams as an authentication option\n * 5. **Collaboration Features**: Mark Teams-powered collaboration features\n * 6. **Notification Preferences**: Indicate Teams notification settings\n * 7. **Account Linking**: Display linked Teams accounts in user profiles\n * 8. **Meeting Indicators**: Show Teams meeting status or join buttons\n * 9. **Channel Selectors**: Indicate Teams channels in navigation\n * 10. **Service Health**: Display Teams service status in dashboards\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TeamsIcon />\n *\n * // Custom size\n * <TeamsIcon className=\"h-6 w-6\" />\n *\n * // In a button\n * <button className=\"flex items-center gap-2\">\n * <TeamsIcon className=\"h-5 w-5\" />\n * Open in Teams\n * </button>\n * ```\n */\n\nimport * as React from 'react';\n\n/**\n * Microsoft Teams Icon component that renders the official Teams logo\n *\n * Accepts all standard SVG element properties. Supports:\n * - className: Optional CSS classes (defaults to \"mr-2 h-4 w-4\")\n * - aria-label: Accessible label (defaults to \"Microsoft Teams\")\n *\n * @param props - Standard SVG element properties\n * @returns SVG element displaying the Microsoft Teams logo with brand colors\n */\nexport function TeamsIcon({\n className = 'mr-2 h-4 w-4',\n 'aria-label': ariaLabel = 'Microsoft Teams',\n ...props\n}: React.SVGProps<SVGSVGElement>) {\n return (\n <svg viewBox=\"0 0 24 24\" className={className} role=\"img\" aria-label={ariaLabel} {...props}>\n <path\n fill=\"#5059C9\"\n d=\"M19.5 9h-7a1.5 1.5 0 0 0-1.5 1.5v7c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5z\"\n />\n <path fill=\"#7B83EB\" d=\"M16 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z\" />\n <path\n fill=\"#7B83EB\"\n d=\"M9.5 9H5a1.5 1.5 0 0 0-1.5 1.5v7c0 .83.67 1.5 1.5 1.5h4.5c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5z\"\n />\n <path fill=\"#5059C9\" d=\"M7.25 4a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5z\" />\n <path fill=\"#7B83EB\" d=\"M21 7.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z\" />\n </svg>\n );\n}\n"],"mappings":";;;;;;;;AAEA,MAAa,cAAc,EAAE,WAAW,GAAG,YACzC,qBAAC;CACC,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,MAAK;CACL,QAAO;CACP,aAAY;CACZ,eAAc;CACd,gBAAe;CACJ;CACX,GAAI;YAEJ,oBAAC;EAAO,IAAG;EAAK,IAAG;EAAK,GAAE;GAAO,EACjC,oBAAC,UAAK,GAAE,YAAY;EAChB;;;;;;;;;;;ACmCR,SAAgB,cAAc,EAC5B,YAAY,gBACZ,GAAG,SAC6B;AAChC,QACE,qBAAC;EAAI,SAAQ;EAAuB;EAAW,GAAI;;GACjD,oBAAC;IAAK,MAAK;IAAU,GAAE;KAAkB;GACzC,oBAAC;IAAK,MAAK;IAAU,GAAE;KAAkB;GACzC,oBAAC;IAAK,MAAK;IAAU,GAAE;KAAoB;GAC3C,oBAAC;IAAK,MAAK;IAAU,GAAE;KAAmB;GAC1C,oBAAC;IAAK,MAAK;IAAU,GAAE;KAAqB;;GACxC;;;;;;;;;;;;;;;ACjBV,SAAgB,UAAU,EACxB,YAAY,gBACZ,cAAc,YAAY,mBAC1B,GAAG,SAC6B;AAChC,QACE,qBAAC;EAAI,SAAQ;EAAuB;EAAW,MAAK;EAAM,cAAY;EAAW,GAAI;;GACnF,oBAAC;IACC,MAAK;IACL,GAAE;KACF;GACF,oBAAC;IAAK,MAAK;IAAU,GAAE;KAAiD;GACxE,oBAAC;IACC,MAAK;IACL,GAAE;KACF;GACF,oBAAC;IAAK,MAAK;IAAU,GAAE;KAAyD;GAChF,oBAAC;IAAK,MAAK;IAAU,GAAE;KAAyC;;GAC5D"}
|
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@od-oneapp/uni-icons",
|
|
3
|
+
"version": "2026.1.1301",
|
|
4
|
+
"private": false,
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/OneDigital-Product/monorepo.git",
|
|
8
|
+
"directory": "platform/packages/uni-icons"
|
|
9
|
+
},
|
|
10
|
+
"sideEffects": false,
|
|
11
|
+
"type": "module",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.mts",
|
|
15
|
+
"import": "./dist/index.mjs",
|
|
16
|
+
"default": "./dist/index.mjs"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"files": [
|
|
20
|
+
"dist",
|
|
21
|
+
"src"
|
|
22
|
+
],
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"lucide-react": "0.563.0",
|
|
25
|
+
"react": "^19.2.4",
|
|
26
|
+
"react-dom": "^19.2.4",
|
|
27
|
+
"tsdown": "^0.20.3"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@types/node": "25.2.3",
|
|
31
|
+
"@types/react": "19.2.13",
|
|
32
|
+
"eslint": "9.39.2",
|
|
33
|
+
"typescript": "5.9.3",
|
|
34
|
+
"@repo/config": "2026.1.1301"
|
|
35
|
+
},
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"react": "^19.2.4",
|
|
38
|
+
"react-dom": "^19.2.4"
|
|
39
|
+
},
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "restricted",
|
|
42
|
+
"registry": "https://registry.npmjs.org/"
|
|
43
|
+
},
|
|
44
|
+
"scripts": {
|
|
45
|
+
"build": "tsdown",
|
|
46
|
+
"build:publish": "tsdown && node ../../../scripts/prepare-publish.mjs",
|
|
47
|
+
"format": "prettier --write --cache --ignore-unknown --ignore-path ../../../.prettierignore .",
|
|
48
|
+
"format:check": "prettier --check --cache --ignore-unknown --ignore-path ../../../.prettierignore .",
|
|
49
|
+
"lint": "eslint . --fix",
|
|
50
|
+
"typecheck": "tsc --noEmit"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type LucideProps } from 'lucide-react';
|
|
2
|
+
|
|
3
|
+
export const CustomIcon = ({ className, ...props }: LucideProps) => (
|
|
4
|
+
<svg
|
|
5
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
+
width="24"
|
|
7
|
+
height="24"
|
|
8
|
+
viewBox="0 0 24 24"
|
|
9
|
+
fill="none"
|
|
10
|
+
stroke="currentColor"
|
|
11
|
+
strokeWidth="2"
|
|
12
|
+
strokeLinecap="round"
|
|
13
|
+
strokeLinejoin="round"
|
|
14
|
+
className={className}
|
|
15
|
+
{...props}
|
|
16
|
+
>
|
|
17
|
+
<circle cx="12" cy="12" r="10" />
|
|
18
|
+
<path d="M8 12h8" />
|
|
19
|
+
</svg>
|
|
20
|
+
);
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview Microsoft Icon Component - Displays the official Microsoft logo with brand colors
|
|
3
|
+
*
|
|
4
|
+
* This component renders the Microsoft logo as an SVG with its distinctive four-square design.
|
|
5
|
+
* The icon uses official Microsoft brand colors and maintains proper aspect ratio across all sizes.
|
|
6
|
+
*
|
|
7
|
+
* ## Use Cases
|
|
8
|
+
*
|
|
9
|
+
* 1. **OAuth Authentication**: Display Microsoft sign-in button for Azure AD/Entra ID authentication
|
|
10
|
+
* 2. **Social Login**: Show Microsoft as an option alongside Google, GitHub, etc. in auth flows
|
|
11
|
+
* 3. **Integration Cards**: Indicate Microsoft service integrations (Teams, Office 365, OneDrive)
|
|
12
|
+
* 4. **Account Connection**: Display connected Microsoft accounts in user profile settings
|
|
13
|
+
* 5. **Service Provider Lists**: Show Microsoft in lists of supported third-party services
|
|
14
|
+
* 6. **Admin Dashboards**: Indicate Microsoft SSO configuration status in enterprise settings
|
|
15
|
+
* 7. **API Documentation**: Mark Microsoft Graph API endpoints or Microsoft-specific features
|
|
16
|
+
* 8. **Marketplace Listings**: Display Microsoft-related apps, extensions, or integrations
|
|
17
|
+
* 9. **Activity Feeds**: Show Microsoft service activity (file shared from OneDrive, Teams message)
|
|
18
|
+
* 10. **Branding Elements**: Include Microsoft logo in partner/sponsor sections or footer links
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* // Basic usage in a sign-in button
|
|
23
|
+
* <button className="flex items-center">
|
|
24
|
+
* <MicrosoftIcon />
|
|
25
|
+
* Sign in with Microsoft
|
|
26
|
+
* </button>
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```tsx
|
|
31
|
+
* // Custom size and styling
|
|
32
|
+
* <MicrosoftIcon className="h-8 w-8" />
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```tsx
|
|
37
|
+
* // Integration card
|
|
38
|
+
* <div className="flex items-center gap-2">
|
|
39
|
+
* <MicrosoftIcon className="h-6 w-6" />
|
|
40
|
+
* <span>Microsoft Teams Connected</span>
|
|
41
|
+
* </div>
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
import * as React from 'react';
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Microsoft Icon component that renders the official Microsoft logo
|
|
49
|
+
*
|
|
50
|
+
* @param props - Standard SVG element properties
|
|
51
|
+
* @param props.className - Optional CSS classes (defaults to "mr-2 h-4 w-4")
|
|
52
|
+
* @returns SVG element displaying the Microsoft logo with brand colors
|
|
53
|
+
*/
|
|
54
|
+
export function MicrosoftIcon({
|
|
55
|
+
className = 'mr-2 h-4 w-4',
|
|
56
|
+
...props
|
|
57
|
+
}: React.SVGProps<SVGSVGElement>) {
|
|
58
|
+
return (
|
|
59
|
+
<svg viewBox="0 0 23 23" className={className} {...props}>
|
|
60
|
+
<path fill="#f3f3f3" d="M0 0h23v23H0z" />
|
|
61
|
+
<path fill="#f35325" d="M1 1h10v10H1z" />
|
|
62
|
+
<path fill="#81bc06" d="M12 1h10v10H12z" />
|
|
63
|
+
<path fill="#05a6f0" d="M1 12h10v10H1z" />
|
|
64
|
+
<path fill="#ffba08" d="M12 12h10v10H12z" />
|
|
65
|
+
</svg>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview Microsoft Teams Icon Component
|
|
3
|
+
*
|
|
4
|
+
* This component renders the Microsoft Teams logo as an SVG with official brand colors.
|
|
5
|
+
* The icon maintains proper aspect ratio across all sizes and includes accessibility attributes.
|
|
6
|
+
*
|
|
7
|
+
* ## Use Cases
|
|
8
|
+
*
|
|
9
|
+
* 1. **Teams Integration Status**: Show Teams connection status in app settings
|
|
10
|
+
* 2. **Activity Indicators**: Display Teams-related activity in notifications
|
|
11
|
+
* 3. **Quick Actions**: Indicate Teams-specific actions in menus
|
|
12
|
+
* 4. **OAuth Buttons**: Show Teams as an authentication option
|
|
13
|
+
* 5. **Collaboration Features**: Mark Teams-powered collaboration features
|
|
14
|
+
* 6. **Notification Preferences**: Indicate Teams notification settings
|
|
15
|
+
* 7. **Account Linking**: Display linked Teams accounts in user profiles
|
|
16
|
+
* 8. **Meeting Indicators**: Show Teams meeting status or join buttons
|
|
17
|
+
* 9. **Channel Selectors**: Indicate Teams channels in navigation
|
|
18
|
+
* 10. **Service Health**: Display Teams service status in dashboards
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* // Basic usage
|
|
23
|
+
* <TeamsIcon />
|
|
24
|
+
*
|
|
25
|
+
* // Custom size
|
|
26
|
+
* <TeamsIcon className="h-6 w-6" />
|
|
27
|
+
*
|
|
28
|
+
* // In a button
|
|
29
|
+
* <button className="flex items-center gap-2">
|
|
30
|
+
* <TeamsIcon className="h-5 w-5" />
|
|
31
|
+
* Open in Teams
|
|
32
|
+
* </button>
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
import * as React from 'react';
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Microsoft Teams Icon component that renders the official Teams logo
|
|
40
|
+
*
|
|
41
|
+
* Accepts all standard SVG element properties. Supports:
|
|
42
|
+
* - className: Optional CSS classes (defaults to "mr-2 h-4 w-4")
|
|
43
|
+
* - aria-label: Accessible label (defaults to "Microsoft Teams")
|
|
44
|
+
*
|
|
45
|
+
* @param props - Standard SVG element properties
|
|
46
|
+
* @returns SVG element displaying the Microsoft Teams logo with brand colors
|
|
47
|
+
*/
|
|
48
|
+
export function TeamsIcon({
|
|
49
|
+
className = 'mr-2 h-4 w-4',
|
|
50
|
+
'aria-label': ariaLabel = 'Microsoft Teams',
|
|
51
|
+
...props
|
|
52
|
+
}: React.SVGProps<SVGSVGElement>) {
|
|
53
|
+
return (
|
|
54
|
+
<svg viewBox="0 0 24 24" className={className} role="img" aria-label={ariaLabel} {...props}>
|
|
55
|
+
<path
|
|
56
|
+
fill="#5059C9"
|
|
57
|
+
d="M19.5 9h-7a1.5 1.5 0 0 0-1.5 1.5v7c0 .83.67 1.5 1.5 1.5h7c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5z"
|
|
58
|
+
/>
|
|
59
|
+
<path fill="#7B83EB" d="M16 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" />
|
|
60
|
+
<path
|
|
61
|
+
fill="#7B83EB"
|
|
62
|
+
d="M9.5 9H5a1.5 1.5 0 0 0-1.5 1.5v7c0 .83.67 1.5 1.5 1.5h4.5c.83 0 1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5z"
|
|
63
|
+
/>
|
|
64
|
+
<path fill="#5059C9" d="M7.25 4a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5z" />
|
|
65
|
+
<path fill="#7B83EB" d="M21 7.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
|
|
66
|
+
</svg>
|
|
67
|
+
);
|
|
68
|
+
}
|