updates

Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>

Author: Rajesh-Nagarajan-11

src/sections/Projects/Sistent/components/icons/code.js

@@ -8,6 +8,16 @@ import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 import { CodeBlock } from "../button/code-block";
 
 const codes = [
+  `  import {
+    SistentThemeProvider,
+    KubernetesIcon,
+    DesignIcon,
+  } from "@sistent/sistent";
+  
+  <SistentThemeProvider>
+    <KubernetesIcon fill="#fff" />
+    <DesignIcon fill="#fff" />
+  </SistentThemeProvider>`,
   `  <SistentThemeProvider>
        <KubernetesIcon />
   </SistentThemeProvider>`,
@@ -62,16 +72,29 @@ const IconsCode = () => {
           />
         </div>
         <div className="main-content">
-          <a id="Basic Usage">
-            <h2>Basic Usage</h2>
+          <a id="Import and Usage">
+            <h2>Import and Usage</h2>
+          </a>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <KubernetesIcon fill={isDark ? "#fff" : "#000"} />
+                <DesignIcon fill={isDark ? "#fff" : "#000"} />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="import-usage-icons" code={codes[0]} />
+          </div>
+
+          <a id="Default Icon">
+            <h2>Default Icon</h2>
           </a>
           <div className="showcase">
             <div className="items">
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <KubernetesIcon />
               </SistentThemeProvider>
             </div>
-            <CodeBlock name="basic-icon" code={codes[0]} />
+            <CodeBlock name="basic-icon" code={codes[1]} />
           </div>
 
           <a id="Custom Size">
@@ -86,7 +109,7 @@ const IconsCode = () => {
                 />
               </SistentThemeProvider>
             </div>
-            <CodeBlock name="sized-icon" code={codes[1]} />
+            <CodeBlock name="sized-icon" code={codes[2]} />
           </div>
         </div>
       </div>