example dashboard svg mqtt

src/pages/home/SvgTest.jsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { Card, Typography, Flex } from 'antd';
+import { ReactSVG } from 'react-svg';
+import { listenMessageState, setValSvg } from '../../components/Global/MqttConnection';
+
+const { Text } = Typography;
+
+const filePathSvg = '/svg/test-new.svg';
+const topicMqtt = 'PIU_GGCP/Devices/PB';
+
+const SvgTest = () => {
+    const [received, setReceived] = useState([]);
+
+    listenMessageState(setReceived)
+
+    useEffect(() => {}, []);
+
+    return (
+        <>
+            <Card>
+                <Flex align="center" justify="center">
+                    <Text strong style={{ fontSize: '30px' }}>
+                        Example SVG Value By Mqtt
+                    </Text>
+                </Flex>
+            </Card>
+            <ReactSVG
+                src={filePathSvg}
+                beforeInjection={(svg) => {
+                    setValSvg(received, topicMqtt, svg);
+                }}
+            />
+        </>
+    );
+};
+
+export default SvgTest;