diff --git a/src/components/Svg/Icons/Audit.tsx b/src/components/Svg/Icons/Audit.tsx new file mode 100644 index 00000000..4909ce25 --- /dev/null +++ b/src/components/Svg/Icons/Audit.tsx @@ -0,0 +1,26 @@ +/** @jsxImportSource theme-ui */ +import React from "react"; +import { rotation, SvgProps } from "./types"; + +const Audit: React.FC = ({ direction = "down", color = "text", width, getStyles }) => { + const deg: rotation = { + left: 90, + up: 180, + right: 270, + down: 0, + }; + const style = getStyles({ + degree: deg[direction as keyof rotation], + color, + }); + return ( + + + + ); +}; + +export default Audit; diff --git a/src/components/Svg/Icons/Bubble.tsx b/src/components/Svg/Icons/Bubble.tsx new file mode 100644 index 00000000..8f6d4497 --- /dev/null +++ b/src/components/Svg/Icons/Bubble.tsx @@ -0,0 +1,47 @@ +/** @jsxImportSource theme-ui */ +import React from "react"; +import { rotation, SvgProps } from "./types"; + +const Bubble: React.FC = ({ direction = "down", color = "text", width, getStyles }) => { + const deg: rotation = { + left: 90, + up: 180, + right: 270, + down: 0, + }; + const style = getStyles({ + degree: deg[direction as keyof rotation], + color, + }); + return ( + + + + + + + + + + + + + ); +}; + +export default Bubble; diff --git a/src/components/Svg/Icons/URL.tsx b/src/components/Svg/Icons/URL.tsx new file mode 100644 index 00000000..805e9455 --- /dev/null +++ b/src/components/Svg/Icons/URL.tsx @@ -0,0 +1,23 @@ +/** @jsxImportSource theme-ui */ +import React from "react"; +import { rotation, SvgProps } from "./types"; + +const URL: React.FC = ({ direction = "down", color = "text", width, getStyles }) => { + const deg: rotation = { + left: 90, + up: 180, + right: 270, + down: 0, + }; + const style = getStyles({ + degree: deg[direction as keyof rotation], + color, + }); + return ( + + + + ); +}; + +export default URL; diff --git a/src/components/Svg/Icons/index.ts b/src/components/Svg/Icons/index.ts index 3a92f713..01c6e3ad 100644 --- a/src/components/Svg/Icons/index.ts +++ b/src/components/Svg/Icons/index.ts @@ -50,3 +50,6 @@ export { default as Quiz } from "./Quiz"; export { default as Bridge } from "./Bridge"; export { default as DocsIcon } from "./Docs"; export { default as Fav } from "./Fav"; +export { default as URL } from "./URL"; +export { default as Bubble } from "./Bubble"; +export { default as Audit } from "./Audit"; diff --git a/src/components/Svg/Svg.tsx b/src/components/Svg/Svg.tsx index fef57683..78d52131 100644 --- a/src/components/Svg/Svg.tsx +++ b/src/components/Svg/Svg.tsx @@ -55,6 +55,9 @@ import { Quiz, Bridge, DocsIcon, + URL, + Bubble, + Audit, } from "./Icons"; import { BSC, BANANA, BNB, ETH, GNANA, POLYGON, TLOS } from "./tokens"; import { IconStyles } from "./Icons/types"; @@ -243,6 +246,15 @@ const Svg: React.FC = ({ icon, ...props }: any) => { if (icon === icons.DOCS) { return ; } + if (icon === icons.URL) { + return ; + } + if (icon === icons.BUBBLE) { + return ; + } + if (icon === icons.AUDIT) { + return ; + } return null; }; diff --git a/src/components/Svg/types.ts b/src/components/Svg/types.ts index 039f18ed..6722ba17 100644 --- a/src/components/Svg/types.ts +++ b/src/components/Svg/types.ts @@ -64,6 +64,9 @@ export enum icons { QUIZ = "quiz", BRIDGE = "bridge", DOCS = "docs", + URL = "URL", + BUBBLE = "bubble", + AUDIT = "audit", } export enum directions {