feat(plugins): Permissions Viewer (#477)

Co-authored-by: V <vendicated@riseup.net>

2 files changed, 40 insertions, 4 deletions

diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index d1cc7a6..4227fce 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -19,27 +19,28 @@
 import "./iconStyles.css";
 
 import { classes } from "@utils/misc";
-import type { PropsWithChildren } from "react";
+import { i18n } from "@webpack/common";
+import type { PropsWithChildren, SVGProps } from "react";
 
 interface BaseIconProps extends IconProps {
     viewBox: string;
 }
 
-interface IconProps {
+interface IconProps extends SVGProps<SVGSVGElement> {
     className?: string;
     height?: number;
     width?: number;
 }
 
-function Icon({ height = 24, width = 24, className, children, viewBox }: PropsWithChildren<BaseIconProps>) {
+function Icon({ height = 24, width = 24, className, children, viewBox, ...svgProps }: PropsWithChildren<BaseIconProps>) {
     return (
         <svg
             className={classes(className, "vc-icon")}
-            aria-hidden="true"
             role="img"
             width={width}
             height={height}
             viewBox={viewBox}
+            {...svgProps}
         >
             {children}
         </svg>
@@ -114,3 +115,34 @@ export function ImageIcon(props: IconProps) {
         </Icon>
     );
 }
+
+export function InfoIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-info-icon")}
+            viewBox="0 0 12 12"
+        >
+            <path fill="currentColor" d="M6 1C3.243 1 1 3.244 1 6c0 2.758 2.243 5 5 5s5-2.242 5-5c0-2.756-2.243-5-5-5zm0 2.376a.625.625 0 110 1.25.625.625 0 010-1.25zM7.5 8.5h-3v-1h1V6H5V5h1a.5.5 0 01.5.5v2h1v1z" />
+        </Icon>
+    );
+}
+
+export function OwnerCrownIcon(props: IconProps) {
+    return (
+        <Icon
+            aria-label={i18n.Messages.GUILD_OWNER}
+            {...props}
+            className={classes(props.className, "vc-owner-crown-icon")}
+            role="img"
+            viewBox="0 0 16 16"
+        >
+            <path
+                fill="currentColor"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M13.6572 5.42868C13.8879 5.29002 14.1806 5.30402 14.3973 5.46468C14.6133 5.62602 14.7119 5.90068 14.6473 6.16202L13.3139 11.4954C13.2393 11.7927 12.9726 12.0007 12.6666 12.0007H3.33325C3.02725 12.0007 2.76058 11.792 2.68592 11.4954L1.35258 6.16202C1.28792 5.90068 1.38658 5.62602 1.60258 5.46468C1.81992 5.30468 2.11192 5.29068 2.34325 5.42868L5.13192 7.10202L7.44592 3.63068C7.46173 3.60697 7.48377 3.5913 7.50588 3.57559C7.5192 3.56612 7.53255 3.55663 7.54458 3.54535L6.90258 2.90268C6.77325 2.77335 6.77325 2.56068 6.90258 2.43135L7.76458 1.56935C7.89392 1.44002 8.10658 1.44002 8.23592 1.56935L9.09792 2.43135C9.22725 2.56068 9.22725 2.77335 9.09792 2.90268L8.45592 3.54535C8.46794 3.55686 8.48154 3.56651 8.49516 3.57618C8.51703 3.5917 8.53897 3.60727 8.55458 3.63068L10.8686 7.10202L13.6572 5.42868ZM2.66667 12.6673H13.3333V14.0007H2.66667V12.6673Z"
+            />
+        </Icon>
+    );
+}
diff --git a/src/components/iconStyles.css b/src/components/iconStyles.css
index 9f2ef8e..ca4075d 100644
--- a/src/components/iconStyles.css
+++ b/src/components/iconStyles.css
@@ -1,3 +1,7 @@
 .vc-open-external-icon {
     transform: rotate(45deg);
 }
+
+.vc-owner-crown-icon {
+    color: var(--text-warning);
+}