updated changes

Author: Mehak261124

package.json

@@ -61,8 +61,5 @@
             "selector-no-vendor-prefix": null,
             "value-no-vendor-prefix": null
         }
-    },
-    "dependencies": {
-        "@jupyter/web-components": "^0.15.3"
     }
 }

packages/components/src/icon/icon.stories.ts

@@ -6,7 +6,7 @@ Icon.register({
   name: 'search',
   svgStr: `
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="currentColor"/>
     </svg>`
 });
 

packages/components/src/icon/icon.test.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { test, expect } from '@playwright/test';
+
+test('Default', async ({ page }) => {
+  await page.goto('/iframe.html?id=components-icon--default');
+
+  expect(await page.locator('jp-icon').screenshot()).toMatchSnapshot(
+    'icon-default.png'
+  );
+});

packages/components/src/icon/index.ts

@@ -9,15 +9,7 @@ import {
   html
 } from '@microsoft/fast-element';
 
-const template = html<Icon>`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    innerHTML="${x => x.getSvg()}"
-  ></svg>
-`;
+const template = html<Icon>`<div :innerHTML="${x => x.getSvg()}"></div>`;
 
 @customElement({
   name: 'jp-icon',
@@ -36,7 +28,7 @@ export class Icon extends FASTElement {
   }
 
   static defaultIcon(): string {
-    return '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>';
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" fill="currentColor"/></svg>';
   }
 
   getSvg(): string {