mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(ui-shell): remove usage of deprecated Icon component

Browse source
This commit is contained in:
Eric Y Liu 2021-05-02 15:29:12 -07:00
commit d9fcaf3038
4 changed files with 7 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/UIShell/GlobalHeader/HeaderActionSearch.svelte
View file

@ -15,7 +15,6 @@
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Close20 from "carbon-icons-svelte/lib/Close20"; import Close20 from "carbon-icons-svelte/lib/Close20";
import Search20 from "carbon-icons-svelte/lib/Search20"; import Search20 from "carbon-icons-svelte/lib/Search20";
import { Icon } from "../../Icon";
import searchStore from "../searchStore"; import searchStore from "../searchStore";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -96,7 +95,7 @@
} }
}}" }}"
> >
<Icon title="Search" tabindex="0" render="{Search20}" /> <svelte:component this="{Search20}" title="Search" tabindex="0" />
</button> </button>
<input <input
bind:this="{elInput}" bind:this="{elInput}"
@ -130,7 +129,7 @@
} }
}}" }}"
> >
<Icon title="Close" tabindex="0" render="{Close20}" /> <svelte:component this="{Close20}" title="Close" tabindex="0" />
</button> </button>
</div> </div>
</div> </div>

8
src/UIShell/SideNav/HamburgerMenu.svelte
View file

@ -13,13 +13,12 @@
import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte"; import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
import { Icon } from "../../Icon";
</script> </script>
<button <button
bind:this="{ref}" bind:this="{ref}"
type="button" type="button"
title="Open menu" title="{ariaLabel}"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
class:bx--header__action="{true}" class:bx--header__action="{true}"
class:bx--header__menu-trigger="{true}" class:bx--header__menu-trigger="{true}"
@ -28,8 +27,5 @@
on:click on:click
on:click="{() => (isOpen = !isOpen)}" on:click="{() => (isOpen = !isOpen)}"
> >
<Icon <svelte:component this="{isOpen ? Close20 : Menu20}" />
title="{isOpen ? 'Close' : 'Open Menu'}"
render="{isOpen ? Close20 : Menu20}"
/>
</button> </button>

4
src/UIShell/SideNav/SideNavLink.svelte
View file

@ -22,8 +22,6 @@
/** Obtain a reference to the HTML anchor element */ /** Obtain a reference to the HTML anchor element */
export let ref = null; export let ref = null;
import Icon from "../../Icon/Icon.svelte";
</script> </script>
<li class:bx--side-nav__item="{true}"> <li class:bx--side-nav__item="{true}">
@ -42,7 +40,7 @@
class:bx--side-nav__icon="{true}" class:bx--side-nav__icon="{true}"
class:bx--side-nav__icon--small="{true}" class:bx--side-nav__icon--small="{true}"
> >
<Icon render="{icon}" /> <svelte:component this="{icon}" />
</div> </div>
{/if} {/if}
<span class:bx--side-nav__link-text="{true}">{text}</span> <span class:bx--side-nav__link-text="{true}">{text}</span>

5
src/UIShell/SideNav/SideNavMenu.svelte
View file

@ -18,7 +18,6 @@
export let ref = null; export let ref = null;
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte"; import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
import Icon from "../../Icon/Icon.svelte";
</script> </script>
<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}"> <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@ -35,7 +34,7 @@
> >
{#if icon} {#if icon}
<div class:bx--side-nav__icon="{true}"> <div class:bx--side-nav__icon="{true}">
<Icon render="{icon}" /> <svelte:component this="{icon}" />
</div> </div>
{/if} {/if}
<span class:bx--side-nav__submenu-title="{true}">{text}</span> <span class:bx--side-nav__submenu-title="{true}">{text}</span>
@ -44,7 +43,7 @@
class:bx--side-nav__icon--small="{true}" class:bx--side-nav__icon--small="{true}"
class:bx--side-nav__submenu-chevron="{true}" class:bx--side-nav__submenu-chevron="{true}"
> >
<Icon title="Open Menu" tabindex="0" render="{ChevronDown16}" /> <svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" />
</div> </div>
</button> </button>
<ul role="menu" class:bx--side-nav__menu="{true}"> <ul role="menu" class:bx--side-nav__menu="{true}">