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

refactor: use icons from carbon-icons-svelte@11 (#1227)

Browse source 
* chore: update ignore rules, remove unused files

* refactor(icons): use icons from carbon-icons-svelte@11

* docs(time-picker): fix default value

* chore: upgrade carbon-icons-svelte to v11

* docs: update examples to use icons from carbon-icons-svelte@11

* docs: update number of icons [ci skip]
This commit is contained in:
metonym 2022-04-03 11:57:28 -07:00 • committed by GitHub
commit ba58ba8f00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
176 changed files with 1410 additions and 2487 deletions
Download patch file Download diff file Expand all files Collapse all files

24
docs/src/COMPONENT_API.json
View file

@ -4053,8 +4053,8 @@
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "Close16" },
{ "type": "forwarded", "name": "keydown", "element": "Close16" }
{ "type": "forwarded", "name": "click", "element": "Close" },
{ "type": "forwarded", "name": "keydown", "element": "Close" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Loading" }
@ -4437,7 +4437,7 @@
{
"name": "iconMenu",
"kind": "let",
"description": "Specify the icon to render for the closed state\nDefaults to `Menu20`",
"description": "Specify the icon to render for the closed state.\nDefaults to `<Menu size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4447,7 +4447,7 @@
{
"name": "iconClose",
"kind": "let",
"description": "Specify the icon to render for the opened state\nDefaults to `Close20`",
"description": "Specify the icon to render for the opened state.\nDefaults to `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4488,7 +4488,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
"description": "Specify the icon to render when the action panel is closed.\nDefaults to `<Switcher size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4498,7 +4498,7 @@
{
"name": "closeIcon",
"kind": "let",
"description": "Specify the icon to render when the action panel is open",
"description": "Specify the icon to render when the action panel is open.\nDefaults to `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4544,13 +4544,13 @@
{
"name": "closeIcon",
"default": false,
"fallback": "<svelte:component this=\"{closeIcon}\" />",
"fallback": "<svelte:component this=\"{closeIcon}\" size=\"{20}\" />",
"slot_props": "{}"
},
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
"slot_props": "{}"
},
{
@ -4619,7 +4619,7 @@
{
"name": "icon",
"default": false,
"fallback": "<svelte:component this=\"{icon}\" />",
"fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
"slot_props": "{}"
}
],
@ -7371,7 +7371,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
"description": "Specify the icon to render.\nDefaults to `<OverflowMenuVertical />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -9183,7 +9183,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
"description": "Specify the icon to render.\nDefaults to `<Search />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -12860,7 +12860,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)",
"description": "Specify the icon to render for the tooltip button.\nDefault to `<Information />`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,

4
docs/src/components/Preview.svelte
View file

@ -6,7 +6,7 @@
import copy from "clipboard-copy";
import { CodeSnippet, Button } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import { url } from "@sveltech/routify";
import { theme } from "../store";
@ -27,7 +27,7 @@
target="_blank"
size="field"
href="{themedSrcUrl}"
icon="{Launch16}"
icon="{Launch}"
>
Open in new tab
</Button>

9
docs/src/components/TileCard.svelte
View file

@ -6,8 +6,8 @@
export let borderBottom = false;
import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32";
import Launch20 from "carbon-icons-svelte/lib/Launch20";
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
$: tileComponent = href ? ClickableTile : Tile;
</script>
@ -29,10 +29,11 @@
</div>
<div class="card-footer">
<svelte:component
this="{LogoGithub32}"
this="{LogoGithub}"
size="{32}"
style="fill: var(--cds-icon-01)"
/>
<Launch20 style="fill: var(--cds-icon-01)" />
<Launch size="{20}" style="fill: var(--cds-icon-01)" />
</div>
</div>
</svelte:component>

4
docs/src/layouts/ComponentLayout.svelte
View file

@ -13,7 +13,7 @@
Tab,
TabContent,
} from "carbon-components-svelte";
import Code16 from "carbon-icons-svelte/lib/Code16";
import Code from "carbon-icons-svelte/lib/Code.svelte";
import { page, metatags } from "@sveltech/routify";
import { onMount } from "svelte";
import { theme } from "../store";
@ -71,7 +71,7 @@
target="_blank"
size="field"
href="{sourceCode}"
icon="{Code16}"
icon="{Code}"
>
Source code
</Button>

4
docs/src/pages/_layout.svelte
View file

@ -15,7 +15,7 @@
SideNavMenuItem,
Tag,
} from "carbon-components-svelte";
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
import Theme from "../components/Theme.svelte";
const deprecated = [];
@ -58,7 +58,7 @@
<HeaderUtilities>
<HeaderActionLink
icon="{LogoGithub20}"
icon="{LogoGithub}"
href="https://github.com/carbon-design-system/carbon-components-svelte"
target="_blank"
/>

22
docs/src/pages/components/Button.svx
View file

@ -1,11 +1,11 @@
<script>
import { InlineNotification, Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
import Login16 from "carbon-icons-svelte/lib/Login16";
import Add from "carbon-icons-svelte/lib/Add.svelte";
import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte";
let index = 1;
@ -43,7 +43,7 @@
</div>
</InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
### Danger ghost button
@ -51,7 +51,7 @@
### Button with icon
<Button icon={Add16}>With icon</Button>
<Button icon={Add}>With icon</Button>
### Icon-only button
@ -61,17 +61,17 @@
</div>
</InlineNotification>
<Button iconDescription="Tooltip text" icon={Add16} />
<Button iconDescription="Tooltip text" icon={Add} />
### Icon-only, link button
<Button iconDescription="Login" icon={Login16} href="#" />
<Button iconDescription="Login" icon={Login} href="#" />
### Icon-only button (custom tooltip position)
The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />
### Selected icon-only, ghost button

4
docs/src/pages/components/ButtonSet.svx
View file

@ -4,7 +4,7 @@ source: Button/ButtonSet.svelte
<script>
import { Button, ButtonSet } from "carbon-components-svelte";
import Login16 from "carbon-icons-svelte/lib/Login16";
import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -22,6 +22,6 @@ Buttons in a button set are juxtaposed by default.
Set `stacked` to `true` to use the stacked variant.
<ButtonSet stacked>
<Button icon={Login16}>Log in</Button>
<Button icon={Login}>Log in</Button>
<Button kind="ghost">Sign up</Button>
</ButtonSet>

8
docs/src/pages/components/ContentSwitcher.svx
View file

@ -4,8 +4,8 @@ components: ["ContentSwitcher", "Switch"]
<script>
import { ContentSwitcher, Switch } from "carbon-components-svelte";
import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
import Bullhorn from "carbon-icons-svelte/lib/Bullhorn.svelte";
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -33,12 +33,12 @@ components: ["ContentSwitcher", "Switch"]
<ContentSwitcher>
<Switch>
<div style="display: flex; align-items: center;">
<Bullhorn16 style="margin-right: 0.5rem;" /> Latest news
<Bullhorn style="margin-right: 0.5rem;" /> Latest news
</div>
</Switch>
<Switch>
<div style="display: flex; align-items: center;">
<Analytics16 style="margin-right: 0.5rem;" /> Trending
<Analytics style="margin-right: 0.5rem;" /> Trending
</div>
</Switch>
</ContentSwitcher>

4
docs/src/pages/components/DataTable.svx
View file

@ -4,7 +4,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
<script>
import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import Preview from "../../components/Preview.svelte";
const pagination = { pageSize: 5, page: 1}
@ -146,7 +146,7 @@ The slot name for the table header cells is `"cell-header"`.
</svelte:fragment>
<svelte:fragment slot="cell" let:row let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'}
<Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
<Link icon={Launch} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
{:else}
{cell.value}
{/if}

4
docs/src/pages/components/Link.svx
View file

@ -4,7 +4,7 @@ components: ["Link", "OutboundLink"]
<script>
import { Link, OutboundLink } from "carbon-components-svelte";
import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
import Carbon from "carbon-icons-svelte/lib/Carbon.svelte"
import Preview from "../../components/Preview.svelte";
</script>
@ -39,7 +39,7 @@ Note that `inline` must be `false` when rendering a link with an icon.
<div>
Visit the
<Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>.
<Link href="https://www.carbondesignsystem.com/" icon={Carbon}>Carbon Design System</Link>.
</div>
### Large size

4
docs/src/pages/components/OverflowMenu.svx
View file

@ -4,7 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<script>
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import Add from "carbon-icons-svelte/lib/Add.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -68,7 +68,7 @@ By default, the first overflow menu item is focused when opening the dropdown.
### Custom trigger icon
<OverflowMenu icon={Add16}>
<OverflowMenu icon={Add}>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />

2
docs/src/pages/components/Search.svx
View file

@ -1,5 +1,5 @@
<script>
import Query16 from "carbon-icons-svelte/lib/Query16";
import Query from "carbon-icons-svelte/lib/Query.svelte";
import { Search } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>

2
docs/src/pages/components/StructuredList.svx
View file

@ -4,7 +4,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
<script>
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
import Preview from "../../components/Preview.svelte";
</script>

4
docs/src/pages/components/Tag.svx
View file

@ -1,6 +1,6 @@
<script>
import { Tag } from "carbon-components-svelte";
import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -43,7 +43,7 @@
Note: rendering a custom icon cannnot be used with the filterable variant.
<Tag icon={IbmCloud16}>IBM Cloud</Tag>
<Tag icon={IbmCloud}>IBM Cloud</Tag>
### Interactive variant

24
docs/src/pages/components/TimePicker.svx
View file

@ -10,11 +10,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Default
<TimePicker labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -23,11 +23,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Light variant
<TimePicker light labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -36,11 +36,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Extra-large size
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -49,11 +49,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Small size
<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -62,11 +62,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Invalid state
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -76,11 +76,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Disabled state
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
<TimePickerSelect value="PM" disabled>
<TimePickerSelect value="pm" disabled>
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT" disabled>
<TimePickerSelect value="pdt" disabled>
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>

4
docs/src/pages/components/Tooltip.svx
View file

@ -4,7 +4,7 @@ components: ["Tooltip", "TooltipFooter"]
<script>
import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte";
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
import Catalog from "carbon-icons-svelte/lib/Catalog.svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -57,7 +57,7 @@ By default, the tooltip is triggered by an information icon.
### Custom icon (component)
<Tooltip triggerText="Resource list" icon={Catalog16}>
<Tooltip triggerText="Resource list" icon={Catalog}>
<p>
Resources are provisioned based on your account's organization.
</p>

18
docs/src/pages/components/TooltipIcon.svx
View file

@ -1,29 +1,29 @@
<script>
import { TooltipIcon } from "carbon-components-svelte";
import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
import Filter20 from "carbon-icons-svelte/lib/Filter20";
import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
import Filter from "carbon-icons-svelte/lib/Filter.svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default ("bottom" direction, "center" aligned)
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
### Directions
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter} />
### Custom tooltip text
Use the "text" slot to customize the tooltip text.
<TooltipIcon icon={Carbon24}>
<TooltipIcon icon={Carbon}>
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
</TooltipIcon>
### Disabled
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />

12
docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
View file

@ -1,8 +1,8 @@
<script>
import { Button } from "carbon-components-svelte";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
let index = 1;
</script>
@ -11,20 +11,20 @@
isSelected="{index === 0}"
kind="ghost"
iconDescription="Bold"
icon="{TextBold16}"
icon="{TextBold}"
on:click="{() => (index = 0)}"
/>
<Button
isSelected="{index === 1}"
kind="ghost"
iconDescription="Italicize"
icon="{TextItalic16}"
icon="{TextItalic}"
on:click="{() => (index = 1)}"
/>
<Button
isSelected="{index === 2}"
kind="ghost"
iconDescription="Underline"
icon="{TextUnderline16}"
icon="{TextUnderline}"
on:click="{() => (index = 2)}"
/>

13
docs/src/pages/framed/ContextMenu/ContextMenu.svelte
View file

@ -5,8 +5,8 @@
ContextMenuGroup,
ContextMenuOption,
} from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let selectedIds = [];
@ -18,14 +18,9 @@
indented
labelText="Copy"
shortcutText="⌘C"
icon="{CopyFile16}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
icon="{CopyFile}"
/>
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider />
<ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options" bind:selectedIds>

13
docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
View file

@ -5,8 +5,8 @@
ContextMenuGroup,
ContextMenuOption,
} from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let target;
</script>
@ -16,14 +16,9 @@
indented
labelText="Copy"
shortcutText="⌘C"
icon="{CopyFile16}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
icon="{CopyFile}"
/>
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider />
<ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options">

13
docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
View file

@ -5,8 +5,8 @@
ContextMenuGroup,
ContextMenuOption,
} from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let target;
let target2;
@ -20,14 +20,9 @@
indented
labelText="Copy"
shortcutText="⌘C"
icon="{CopyFile16}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
icon="{CopyFile}"
/>
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider />
<ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options">

4
docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
View file

@ -9,7 +9,7 @@
ToolbarBatchActions,
Button,
} from "carbon-components-svelte";
import Save16 from "carbon-icons-svelte/lib/Save16";
import Save from "carbon-icons-svelte/lib/Save.svelte";
const headers = [
{ key: "name", value: "Name" },
@ -34,7 +34,7 @@
<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
<Toolbar>
<ToolbarBatchActions>
<Button icon="{Save16}">Save</Button>
<Button icon="{Save}">Save</Button>
</ToolbarBatchActions>
<ToolbarContent>
<ToolbarSearch />

4
docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
View file

@ -1,13 +1,13 @@
<script>
import { Modal } from "carbon-components-svelte";
import Send16 from "carbon-icons-svelte/lib/Send16";
import Send from "carbon-icons-svelte/lib/Send.svelte";
</script>
<Modal
open
modalHeading="Invite someone"
primaryButtonText="Send invitation"
primaryButtonIcon="{Send16}"
primaryButtonIcon="{Send}"
secondaryButtonText="Cancel"
>
<p>Do you really want to invite someone?</p>

44
docs/src/pages/framed/TreeView/TreeViewIcons.svelte
View file

@ -1,76 +1,74 @@
<script>
import { TreeView } from "carbon-components-svelte";
import WatsonMachineLearning16 from "carbon-icons-svelte/lib/WatsonMachineLearning16";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
import Blockchain16 from "carbon-icons-svelte/lib/Blockchain16";
import DataBase16 from "carbon-icons-svelte/lib/DataBase16";
import SignalStrength16 from "carbon-icons-svelte/lib/SignalStrength16";
import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
let activeId = 1;
let selectedIds = [];
let children = [
{ id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning16 },
{ id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
{
id: 1,
text: "Analytics",
icon: Analytics16,
icon: Analytics,
expanded: true,
children: [
{
id: 2,
text: "IBM Analytics Engine",
icon: Analytics16,
icon: Analytics,
expanded: true,
children: [
{ id: 3, text: "Apache Spark", icon: Analytics16 },
{ id: 4, text: "Hadoop", icon: Analytics16 },
{ id: 3, text: "Apache Spark", icon: Analytics },
{ id: 4, text: "Hadoop", icon: Analytics },
],
},
{ id: 5, text: "IBM Cloud SQL Query", icon: Analytics16 },
{ id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics16 },
{ id: 5, text: "IBM Cloud SQL Query", icon: Analytics },
{ id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics },
],
},
{
id: 7,
text: "Blockchain",
icon: Blockchain16,
children: [
{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain16 },
],
icon: Blockchain,
children: [{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain }],
},
{
id: 9,
text: "Databases",
icon: DataBase16,
icon: DataBase,
children: [
{
id: 10,
text: "IBM Cloud Databases for Elasticsearch",
icon: DataBase16,
icon: DataBase,
},
{
id: 11,
text: "IBM Cloud Databases for Enterprise DB",
icon: DataBase16,
icon: DataBase,
},
{ id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase16 },
{ id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase },
{
id: 13,
text: "IBM Cloud Databases for PostgreSQL",
icon: DataBase16,
icon: DataBase,
},
],
},
{
id: 14,
text: "Integration",
icon: SignalStrength16,
icon: SignalStrength,
disabled: true,
children: [
{
id: 15,
text: "IBM API Connect",
icon: SignalStrength16,
icon: SignalStrength,
disabled: true,
},
],

12
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
View file

@ -16,7 +16,7 @@
Row,
Column,
} from "carbon-components-svelte";
import Fade16 from "carbon-icons-svelte/lib/Fade16";
import Fade from "carbon-icons-svelte/lib/Fade.svelte";
let isSideNavOpen = false;
</script>
@ -39,16 +39,16 @@
<SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNavItems>
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade16}" text="Link 2" href="/" />
<SideNavLink icon="{Fade16}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade16}" text="Menu">
<SideNavLink icon="{Fade}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade}" text="Link 2" href="/" />
<SideNavLink icon="{Fade}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade}" text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
<SideNavDivider />
<SideNavLink icon="{Fade16}" text="Link 4" href="/" />
<SideNavLink icon="{Fade}" text="Link 4" href="/" />
</SideNavItems>
</SideNav>
</Header>

10
docs/src/pages/framed/UIShell/HeaderUtilities.svelte
View file

@ -18,8 +18,8 @@
Row,
Column,
} from "carbon-components-svelte";
import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
import UserAvatarFilledAlt20 from "carbon-icons-svelte/lib/UserAvatarFilledAlt20";
import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";
let isSideNavOpen = false;
let isOpen1 = false;
@ -31,11 +31,11 @@
<SkipToContent />
</svelte:fragment>
<HeaderUtilities>
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
<HeaderAction
bind:isOpen="{isOpen1}"
icon="{UserAvatarFilledAlt20}"
closeIcon="{UserAvatarFilledAlt20}"
icon="{UserAvatarFilledAlt}"
closeIcon="{UserAvatarFilledAlt}"
>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>

6
docs/src/pages/framed/_reset.svelte
View file

@ -22,7 +22,11 @@
padding: var(--cds-spacing-06) var(--cds-spacing-05);
}
:global(.framed [class^="bx--col"]) {
:global(.framed :not(.bx--content) [class^="bx--col"]) {
outline: 1px solid var(--cds-interactive-04);
}
:global(.framed .bx--content [class^="bx--col"]) {
outline: 0;
}
</style>

2
docs/src/pages/index.svelte
View file

@ -268,7 +268,7 @@
<TileCard
borderBottom
title="Carbon Icons Svelte"
subtitle="7000+ icons"
subtitle="1900+ icons"
target="_blank"
href="https://github.com/carbon-design-system/carbon-icons-svelte"
/>