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

chore: index svelte components (#1266)

Browse source 
Add `carbon.yml` that indexes the Svelte component library.

Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>
This commit is contained in:
Andrea N. Cardona 2022-05-04 13:12:40 -05:00 • committed by GitHub
commit b531bd19b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 1448 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

699
carbon.yml Normal file
View file

@ -0,0 +1,699 @@
# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
library:
id: carbon-components-svelte
name: Carbon Components Svelte
description: Svelte implementation of Carbon Components.
externalDocsUrl: https://carbon-components-svelte.onrender.com
inherits: carbon-styles
assets:
accordion:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/accordion/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Accordion
aspect-ratio:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/AspectRatio
breadcrumb:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/breadcrumb/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Breadcrumb
breakpoint:
name: Breakpoint
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/breakpoint.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Breakpoint
tags:
- shell
button:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/button/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Button
button-set:
name: Button set
description: Buttons in a button set are juxtaposed by default.
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/button-set.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ButtonSet
tags:
- input-control
checkbox:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/checkbox/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Checkbox
clickable-tile:
name: Clickable tile
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/clickable-tile.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ClickableTile
tags:
- contextual-navigation
code-snippet:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/code-snippet/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/CodeSnippet
combo-box:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ComboBox
composed-modal:
name: Composed modal
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/composed-modal.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ComposedModal
tags:
- input-control
content-switcher:
status: stable
externalDocsUrl: https://www.carbondesignsystem.com/components/content-switcher/usage
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ContentSwitcher
context-menu:
name: Context menu
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/context-menu.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ContextMenu
tags:
- input-control
- contextual-navigation
copy-button:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/CopyButton
data-table:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/data-table/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/DataTable
date-picker:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/date-picker/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/DatePicker
dropdown:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Dropdown
expandable-tile:
name: Expandable tile
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/expandable-tile.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ExpandableTile
tags:
- data-display
- content-element
file-uploader:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/file-uploader/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/FileUploader
fluid-form:
name: Fluid form
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/fluid-form.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/FluidForm
tags:
- form
form:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/form/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Form
grid:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Grid
image-loader:
name: Image loader
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/image-loader.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ImageLoader
tags:
- shell
- media
- media
inline-loading:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/inline-loading/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/InlineLoading
inline-notification:
name: Inline notification
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/inline-loading.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/InlineNotification
tags:
- system-feedback
link:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/link/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Link
loading:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/loading/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Loading
local-storage:
name: Local storage
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/local-storage.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/LocalStorage
tags:
- input-control
modal:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/modal/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Modal
multiselect:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage/#multiselect
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/MultiSelect
number-input:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/number-input/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/NumberInput
ordered-list:
name: Ordered list
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/ordered-list.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/OrderedList
tags:
- data-display
overflow-menu:
name: Overflow menu
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: ''
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/OverflowMenu
tags:
- input-control
pagination:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/pagination/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Pagination
pagination-nav:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/PaginationNav
password-input:
name: Password input
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/password-input.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/PasswordInput
tags:
- form
- contextual-navigation
popover:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Popover
progress-bar:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/progress-bar/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ProgressBar
progress-indicator:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/progress-indicator/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ProgressIndicator
radio-button:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/radio-button/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/RadioButton
radio-tile:
name: Radio tile
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/radio-tile.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/RadioTile
tags:
- input-control
recursive-list:
name: Recursive list
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/recursive-list.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/RecursiveList
tags:
- data-display
search:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/search/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Search
select:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/select/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Select
selectable-tile:
name: Selectable tile
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/selectable-tile.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/SelectableTile
tags:
- input-control
skeleton-placeholder:
name: Skeleton placeholder
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/skeleton-placeholder.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/SkeletonPlaceholder
tags:
- system-feedback
skeleton-text:
name: Skeleton text
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/skeleton-text.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/SkeletonText
tags:
- shell
slider:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/slider/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Slider
structured-list:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/structured-list/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/StructuredList
tabs:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/tabs/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Tabs
tag:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/tag/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Tag
text-area:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TextArea
text-input:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/text-input/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TextInput
theme:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Theme
tile:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/tile/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Tile
time-picker:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TimePicker
toast-notification:
name: Toast notification
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/toast-notification.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/ToastNotification
tags:
- input-control
toggle:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/toggle/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Toggle
tooltip:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/tooltip/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Tooltip
tooltip-definition:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TooltipDefinition
tooltip-icon:
name: Tootlip icon
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/tooltip-icon.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TooltipIcon
tags:
- content-element
tree-view:
status: stable
framework: svelte
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/TreeView
truncate:
name: Truncate
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/truncate.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/Truncate
tags:
- data-display
ui-shell-header:
status: stable
framework: svelte
externalDocsUrl: https://www.carbondesignsystem.com/components/UI-shell-header/usage
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/UIShell
unordered-list:
name: Unordered list
status: stable
type: component
platform: web
framework: svelte
thumbnailPath: './thumbnails/unordered-list.svg'
demoLinks:
- type: storybook
name: Storybook
action: link
url: https://carbon-components-svelte.onrender.com/components/UnorderedList
tags:
- data-display

149
thumbnails/breakpoint.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

15
thumbnails/button-set.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>button-set</title>
<g id="button-set" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-2" fill="#393939" x="56" y="74" width="104" height="32"></rect>
<rect id="Rectangle-Copy-4" fill="#FFFFFF" x="159" y="74" width="1" height="32"></rect>
<rect id="Rectangle-Copy-3" fill="#0E62FE" x="160" y="74" width="104" height="32"></rect>
<text id="Cancel" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#F4F4F4">
<tspan x="68" y="95">Cancel</tspan>
</text>
<text id="Submit" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#FFFFFF">
<tspan x="172" y="95">Submit</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 978 B

33
thumbnails/clickable-tile.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>clickable-tile</title>
<defs>
<polygon id="path-1" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<filter x="-25.6%" y="-15.2%" width="156.3%" height="137.2%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="0.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.75" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<filter x="-13.7%" y="-5.3%" width="127.4%" height="117.7%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="0.75" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="clickable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="72" y="41" width="176" height="98"></rect>
<rect id="Rectangle-Copy-4" fill="#A8A8A8" x="85" y="54" width="90" height="8"></rect>
<g id="Group" transform="translate(212.000000, 97.000000)">
<g id="Soft-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<g id="Hard-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-4)" xlink:href="#path-3"></use>
</g>
<polygon id="Ouline" fill="#FFFFFF" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<polygon id="Arrow" fill="#000000" points="13.7560605 14.4 18 14.4 8.4 4.8 8.4 18 11.4024434 14.9975566 14.1576509 21.4884188 16.3668625 20.5506641"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

33
thumbnails/composed-modal.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>composed-modal</title>
<defs>
<rect id="path-1" x="60" y="44" width="200" height="90"></rect>
<filter x="-5.0%" y="-8.9%" width="110.0%" height="122.2%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.862745106 0 0 0 0 0.862745106 0 0 0 0 0.862745106 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="6.53025 6 9 3.53025 8.46975 3 6 5.46975 3.53025 3 3 3.53025 5.46975 6 3 8.46975 3.53025 9 6 6.53025 8.46975 9 9 8.46975"></polygon>
</defs>
<g id="composed-modal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Rectangle-Copy" fill="black" fill-opacity="1">
<use filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<g id="color/gray/10-copy-11" transform="translate(60.000000, 44.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="200" height="90"></rect>
</g>
<g id="checkbox" transform="translate(69.000000, 76.000000)" fill="#161616">
<path d="M9.75,1.5 L2.25,1.5 C1.83578644,1.5 1.5,1.83578644 1.5,2.25 L1.5,9.75 C1.5,10.1642136 1.83578644,10.5 2.25,10.5 L9.75,10.5 C10.1642136,10.5 10.5,10.1642136 10.5,9.75 L10.5,2.25 C10.5,1.83578644 10.1642136,1.5 9.75,1.5 Z M2.25,9.75 L2.25,2.25 L9.75,2.25 L9.75,9.75 L2.25,9.75 Z" id="Fill"></path>
</g>
<g id="icon/navigation/close/16-copy-3" transform="translate(239.000000, 53.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-Copy-5" fill="#8D8D8D" x="70" y="57" width="58" height="7"></rect>
<rect id="Rectangle-Copy-20" fill="#C6C6C6" x="160" y="108" width="101" height="26"></rect>
<rect id="Rectangle-Copy-21" fill="#A8A8A8" x="88" y="79" width="96" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

73
thumbnails/context-menu.svg Normal file
View file

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>context-menu</title>
<defs>
<polygon id="path-1" points="56 32 142.96332 32 162 32 162 147 56 147"></polygon>
<filter x="-9.4%" y="-7.0%" width="118.9%" height="117.4%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="0 4.88498131e-14 83.681685 -1.70974346e-13 102 -1.70974346e-13 102 55 0 55"></polygon>
<filter x="-9.8%" y="-14.5%" width="119.6%" height="136.4%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-5" points="4.875 3.375 7.875 6 4.875 8.625"></polygon>
<polygon id="path-7" points="8.22265846 9.71042991 6.19754778 10.5700384 5.03844771 7.83936975 3.3 9.57781746 3.3 0.872182541 9.57781746 7.15 7.13582044 7.15"></polygon>
<filter x="-55.8%" y="-33.1%" width="222.8%" height="181.1%" filterUnits="objectBoundingBox" id="filter-8">
<feMorphology radius="0.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.75" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-9" points="8.22265846 9.71042991 6.19754778 10.5700384 5.03844771 7.83936975 3.3 9.57781746 3.3 0.872182541 9.57781746 7.15 7.13582044 7.15"></polygon>
<filter x="-29.9%" y="-11.6%" width="159.7%" height="138.7%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="0" dy="0.75" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="context-menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-4" x="56" y="111" width="13.65" height="17"></rect>
<g id="Rectangle-2-Copy-17">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#F3F3F3" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<rect id="Rectangle-2-Copy-28" fill="#DCDCDC" opacity="0.6" x="56" y="35" width="105" height="16"></rect>
<rect id="Rectangle-2-Copy-29" fill="#C6C6C6" opacity="0.6" x="56" y="54" width="106" height="1"></rect>
<rect id="Rectangle-2-Copy-30" fill="#C6C6C6" opacity="0.6" x="56" y="109" width="106" height="1"></rect>
<rect id="Rectangle-3-Copy-9" fill="#8D8D8D" x="65.45" y="41" width="43.05" height="4"></rect>
<rect id="Rectangle-3-Copy-14" fill="#BEBEBE" x="65.45" y="118" width="43.05" height="4"></rect>
<rect id="Rectangle-3-Copy-15" fill="#BEBEBE" x="65.45" y="134" width="52" height="4"></rect>
<rect id="Rectangle-3-Copy-10" fill="#BEBEBE" x="65.45" y="64" width="52" height="4"></rect>
<rect id="Rectangle-3-Copy-11" fill="#BEBEBE" x="65.45" y="80" width="43.05" height="4"></rect>
<rect id="Rectangle-3-Copy-12" fill="#BEBEBE" x="65.45" y="96" width="52" height="4"></rect>
<g id="Rectangle-2-Copy-17" transform="translate(162.000000, 32.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#F3F3F3" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-3-Copy-13" fill="#BEBEBE" x="183.45" y="41" width="51" height="4"></rect>
<rect id="Rectangle-3-Copy-16" fill="#BEBEBE" x="183.45" y="57" width="43.05" height="4"></rect>
<rect id="Rectangle-2-Copy-33" fill="#DCDCDC" opacity="0.6" x="162" y="67" width="103" height="16"></rect>
<rect id="Rectangle-3-Copy-17" fill="#8D8D8D" x="183.45" y="73" width="51" height="4"></rect>
<g id="icon/navigation/caret/right/16" transform="translate(140.000000, 37.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-5"></use>
</g>
<g id="icon/hover-states/arrow-cursor" transform="translate(241.000000, 70.000000)">
<g id="Soft-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-8)" xlink:href="#path-7"></use>
</g>
<g id="Hard-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-10)" xlink:href="#path-9"></use>
</g>
<polygon id="Ouline" fill="#FFFFFF" points="8.22265846 9.71042991 6.19754778 10.5700384 5.03844771 7.83936975 3.3 9.57781746 3.3 0.872182541 9.57781746 7.15 7.13582044 7.15"></polygon>
<polygon id="Arrow" fill="#000000" points="6.30486108 6.6 8.25 6.6 3.85 2.2 3.85 8.25 5.22611988 6.87388012 6.48892333 9.8488586 7.50147867 9.41905436"></polygon>
</g>
<polygon id="Path" fill="#000000" points="172.642857 45 170.5 42.8742857 171.181429 42.2142857 172.642857 43.65 175.818571 40.5 176.5 41.1771429"></polygon>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.1 KiB

46
thumbnails/expandable-tile.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>expandable-tile</title>
<defs>
<filter x="-54.7%" y="-48.6%" width="209.4%" height="197.2%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<polygon id="path-2" points="5 0 10 5 9.293 5.707 5 1.414 0.707 5.707 0 5"></polygon>
</defs>
<g id="expandable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(72.000000, 33.000000)">
<rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="0" y="8" width="176" height="98"></rect>
<rect id="Rectangle-Copy-4" fill="#A8A8A8" x="13" y="21" width="90" height="8"></rect>
<rect id="Rectangle-Copy-5" x="13" y="0" width="90" height="8"></rect>
<g transform="translate(153.000000, 90.000000)" fill="#FFFFFF" id="hand-cursor">
<g filter="url(#filter-1)" transform="translate(4.000000, 2.000000)">
<polygon id="Rectangle" points="7 4 10 4 10 8 7 8"></polygon>
<polygon id="Rectangle-Copy" points="10 7 13 7 13 11 10 11"></polygon>
<path d="M13.2815687,10.7869723 C13.2793405,10.8536671 13.2719207,10.9325894 13.2592869,11.023739 C13.2280924,11.2519911 13.1705384,11.4609684 13.0866028,11.6506708 C12.819221,12.2583277 12.3420114,12.5621673 11.6549961,12.5621673 C11.2561516,12.5621673 10.9546118,12.5695705 10.7503544,12.5843989 L10.5631872,12.5843989 L10.5631872,11.6506708 L10.5631872,9.9832991 M10.5631872,11.6506708 C10.560959,11.7173657 10.5535391,11.7962879 10.5409053,11.8874376 C10.5097108,12.1156896 10.4521569,12.3246669 10.3682213,12.5143693 C10.1008395,13.1220485 9.62362982,13.4258659 8.93661459,13.4258659 C8.53777008,13.4258659 8.23623026,13.4332912 8.03197286,13.4480975 L7.8448056,13.4480975 L7.8448056,10.8469976 M7.8448056,13.4480975 L7.8448056,16.2292735 C7.84331272,16.2959684 7.83662817,16.3748906 7.82475197,16.466018 C7.79578561,16.6942701 7.74266576,16.9032474 7.66543698,17.0929498 C7.43444139,17.6605898 7.0337475,17.9629621 6.463333,18 C5.89365381,17.9629621 5.49333871,17.6605898 5.26234312,17.0929498 C5.18509206,16.9032474 5.1319945,16.6942479 5.10302813,16.466018 C5.09112964,16.3748684 5.08408859,16.2959684 5.08186041,16.2292735 L5.08186041,7.93576665 C3.06312787,10.4279316 0.851739859,10.1112215 4.4408921e-15,8.1137102 C2.40124447,5.97131542 4.45574138,3.84533708 5.26234312,0 L14.1505595,0.0222316227 C14.4558204,0.863320603 14.8049096,1.37327819 15.1978049,2.81166418 C15.5914577,4.25005017 15.8569679,5.81524778 15.9943798,8.51490042 L15.9999503,9.64871318 C16.0006856,9.72430069 15.9932657,9.81916303 15.9776685,9.93327795 C15.9464739,10.16153 15.88892,10.3705073 15.8049844,10.5602097 C15.5376026,11.1678666 15.0603929,11.4717062 14.3733777,11.4717062 C13.9745332,11.4717062 13.6729934,11.4791094 13.468736,11.4939379 L13.2815687,11.5161695 L13.2815687,10.7869723 C13.2815687,10.7780796 13.2782264,9.23853974 13.2782264,9.23853974 L13.2815687,8.89283801 M13.2715419,8.69386498 L13.3043009,9.23853974" id="Shape" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(8.000000, 9.000000) scale(1, -1) translate(-8.000000, -9.000000) "></path>
</g>
</g>
<g transform="translate(144.000000, 79.000000)" id="icon/navigation/chevron/up/16-copy-46">
<g transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) " id="Group">
<g id="chevron--up" transform="translate(3.000000, 5.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-2"></use>
<g id="Group" mask="url(#mask-3)">
<g transform="translate(-3.000000, -5.000000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="40" height="40"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(8.000000, 8.000000) rotate(-90.000000) translate(-8.000000, -8.000000) " points="1.77635684e-15 -7.90206676e-15 16 -7.90206676e-15 16 16 1.77635684e-15 16"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

77
thumbnails/fluid-form.svg Normal file
View file

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>form</title>
<defs>
<polygon id="path-1" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
<polygon id="path-3" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
<polygon id="path-5" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
</defs>
<g id="form" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="color/gray/10-copy-12" transform="translate(90.000000, 32.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="152" height="116"></rect>
</g>
<rect id="Rectangle-Copy-6" fill="#A8A8A8" x="99" y="41" width="48.59854" height="5"></rect>
<rect id="Rectangle-Copy-14" fill="#C6C6C6" x="99" y="52" width="89" height="3"></rect>
<rect id="Rectangle-Copy-26" fill="#C6C6C6" x="99" y="58" width="72.7591241" height="3"></rect>
<rect id="Rectangle-25-Copy-22" stroke="#006AFF" stroke-width="1.14" fill="#FFFFFF" x="90.57" y="72.57" width="150.86" height="14.86"></rect>
<rect id="Rectangle-Copy-27" fill="#C6C6C6" x="99" y="78" width="62.9489051" height="3"></rect>
<rect id="Rectangle-Copy-28" fill="#C6C6C6" x="99" y="95" width="33.948905" height="3"></rect>
<rect id="Rectangle-Copy-30" fill="#C6C6C6" x="111" y="112" width="38.948905" height="3"></rect>
<rect id="Rectangle-Copy-29" fill="#C6C6C6" x="172" y="95" width="33.948905" height="3"></rect>
<rect id="Rectangle-Copy-56" fill="#C6C6C6" x="91" y="104" width="151" height="1"></rect>
<rect id="Rectangle-Copy-57" fill="#C6C6C6" x="163" y="88" width="1" height="16"></rect>
<g id="Group" transform="translate(228.000000, 76.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<g id="Group" transform="translate(228.000000, 92.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-3"></use>
<g id="Group" mask="url(#mask-4)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<g id="Group" transform="translate(149.000000, 92.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-5"></use>
<g id="Group" mask="url(#mask-6)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<rect id="Rectangle-Copy-24" fill="#0F6DFF" x="166" y="130" width="76" height="18"></rect>
<rect id="Rectangle-Copy-25" fill="#3D3D3D" x="90" y="130" width="75" height="18"></rect>
<g id="checkbox" transform="translate(97.000000, 109.000000)" fill="#161616">
<path d="M7.3125,1.125 L1.6875,1.125 C1.37683983,1.125 1.125,1.37683983 1.125,1.6875 L1.125,7.3125 C1.125,7.62316017 1.37683983,7.875 1.6875,7.875 L7.3125,7.875 C7.62316017,7.875 7.875,7.62316017 7.875,7.3125 L7.875,1.6875 C7.875,1.37683983 7.62316017,1.125 7.3125,1.125 Z M1.6875,7.3125 L1.6875,1.6875 L7.3125,1.6875 L7.3125,7.3125 L1.6875,7.3125 Z" id="Fill"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.7 KiB

16
thumbnails/image-loader.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>image-loader</title>
<defs>
<path d="M14.25,10.5 C13.0073593,10.5 12,9.49264069 12,8.25 C12,7.00735931 13.0073593,6 14.25,6 C15.4926407,6 16.5,7.00735931 16.5,8.25 C16.5,8.8467371 16.2629471,9.41903341 15.8409903,9.84099026 C15.4190334,10.2629471 14.8467371,10.5 14.25,10.5 L14.25,10.5 Z M14.25,7.5 C13.8357864,7.5 13.5,7.83578644 13.5,8.25 C13.5,8.66421356 13.8357864,9 14.25,9 C14.6642136,9 15,8.66421356 15,8.25 C15,7.83578644 14.6642136,7.5 14.25,7.5 Z M19.6125,3 L4.3875,3 C3.62120491,3 3,3.62120491 3,4.3875 L3,19.6125 C3,19.9804879 3.14618262,20.3334039 3.40638934,20.5936107 C3.66659607,20.8538174 4.01951212,21 4.3875,21 L19.6125,21 C19.9804879,21 20.3334039,20.8538174 20.5936107,20.5936107 C20.8538174,20.3334039 21,19.9804879 21,19.6125 L21,4.3875 C21,3.62120491 20.3787951,3 19.6125,3 Z M19.5,4.5 L19.5,15.9975 L16.695,13.1925 C16.4136476,12.9108344 16.0318639,12.75257 15.63375,12.75257 C15.2356361,12.75257 14.8538524,12.9108344 14.5725,13.1925 L13.5,14.2875 L9.375,10.1925 C9.09364761,9.91083444 8.71186387,9.75257002 8.31375,9.75257002 C7.91563613,9.75257002 7.53385239,9.91083444 7.2525,10.1925 L4.5,12.945 L4.5,4.5 L19.5,4.5 Z M4.5,19.5 L4.5,15.06 L8.31,11.25 L8.31,11.25 L12.4125,15.3525 C12.6938524,15.6341656 13.0756361,15.79243 13.47375,15.79243 C13.8718639,15.79243 14.2536476,15.6341656 14.535,15.3525 L15.63,14.25 L15.63,14.25 L19.5,18.12 L19.5,19.5 L4.5,19.5 Z" id="path-1"></path>
</defs>
<g id="image-loader" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-29" fill="#BEBEBE" x="60" y="36" width="200" height="109"></rect>
<g id="icon/formatting/image/16-copy" transform="translate(148.000000, 79.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#8E8E93" xlink:href="#path-1"></use>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

23
thumbnails/inline-notification.svg Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>inline-notification</title>
<defs>
<circle id="path-1" cx="5" cy="5" r="4.375"></circle>
<polygon id="path-3" points="4.375 6.71875 2.8125 5.15625 3.309375 4.6875 4.375 5.734375 6.690625 3.4375 7.1875 3.93125"></polygon>
</defs>
<g id="inline-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="77" width="200" height="26"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(69.000000, 85.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#24A148" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<rect id="Path-Copy-2" fill="#24A148" x="60" y="77" width="2" height="26"></rect>
<rect id="Rectangle-Copy-14" fill="#F4F4F4" x="85" y="88" width="100.088235" height="4"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

22
thumbnails/local-storage.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>local-storage</title>
<g id="local-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Button" transform="translate(86.000000, 106.000000)">
<rect id="Background" fill="#0F62FE" x="0" y="0" width="148" height="32"></rect>
<text id="Label" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" line-spacing="16" letter-spacing="0.137142854" fill="#FFFFFF">
<tspan x="16" y="20">Clear storage</tspan>
</text>
</g>
<g id="Group" transform="translate(86.000000, 60.000000)">
<g>
<rect id="pill" fill="#8D8D8D" x="0" y="0" width="32" height="16" rx="8"></rect>
<circle id="handle" fill="#FFFFFF" cx="8" cy="8" r="5"></circle>
</g>
<text id="Text" font-family="IBMPlexSans, IBM Plex Sans" font-size="14" font-weight="normal" line-spacing="18" letter-spacing="0.159999996" fill="#161616">
<tspan x="40" y="13">Off</tspan>
</text>
</g>
<rect id="Rectangle-3-Copy-6" fill="#A8A8A8" opacity="0.754768008" x="86" y="42" width="70" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

12
thumbnails/ordered-list.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ordered-list</title>
<g id="ordered-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
<text id="1.-Ordered-List-2.-O" fill="#161616">
<tspan x="113" y="70">1. Ordered List</tspan>
<tspan x="113" y="86">2. Ordered List </tspan>
<tspan x="113" y="102">3. Ordered List</tspan>
<tspan x="113" y="118">4. Ordered List </tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 768 B

27
thumbnails/password-input.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>password-input</title>
<defs>
<path d="M15.47,7.83 C14.266932,4.72169147 11.330606,2.626562 8,2.5 C4.66939395,2.626562 1.73306803,4.72169147 0.53,7.83 C0.490283624,7.9398538 0.490283624,8.0601462 0.53,8.17 C1.73306803,11.2783085 4.66939395,13.373438 8,13.5 C11.330606,13.373438 14.266932,11.2783085 15.47,8.17 C15.5097164,8.0601462 15.5097164,7.9398538 15.47,7.83 Z M8,12.5 C5.35,12.5 2.55,10.535 1.535,8 C2.55,5.465 5.35,3.5 8,3.5 C10.65,3.5 13.45,5.465 14.465,8 C13.45,10.535 10.65,12.5 8,12.5 Z M8,5 C6.34314575,5 5,6.34314575 5,8 C5,9.65685425 6.34314575,11 8,11 C9.65685425,11 11,9.65685425 11,8 C11,6.34314575 9.65685425,5 8,5 Z M8,10 C6.8954305,10 6,9.1045695 6,8 C6,6.8954305 6.8954305,6 8,6 C9.1045695,6 10,6.8954305 10,8 C10,8.53043298 9.78928632,9.03914081 9.41421356,9.41421356 C9.03914081,9.78928632 8.53043298,10 8,10 Z" id="path-1"></path>
</defs>
<g id="password-input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-21" transform="translate(56.000000, 75.000000)">
<rect id="Rectangle-11-Copy" fill="#F3F3F3" x="0" y="0" width="208" height="32"></rect>
<line x1="0" y1="31.5" x2="208" y2="31.5" id="Path-3-Copy-8" stroke="#8C8C8C"></line>
</g>
<g id="Group" transform="translate(234.000000, 83.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
</g>
<circle id="Oval" fill="#161616" cx="71.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy" fill="#161616" cx="80.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-2" fill="#161616" cx="89.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-3" fill="#161616" cx="98.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-4" fill="#161616" cx="107.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-5" fill="#161616" cx="116.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-6" fill="#161616" cx="125.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-7" fill="#161616" cx="134.5" cy="91.5" r="2.5"></circle>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

35
thumbnails/radio-tile.svg Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>radio-tile</title>
<defs>
<circle id="path-1" cx="6.5" cy="6.5" r="5.6875"></circle>
<polygon id="path-3" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
</defs>
<g id="radio-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-Copy-2" transform="translate(56.000000, 109.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group" transform="translate(56.000000, 33.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group-Copy" transform="translate(56.000000, 71.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
</g>
<rect id="Rectangle-Copy-4" fill="#C6C6C6" x="67" y="44" width="72" height="6"></rect>
<rect id="Rectangle-Copy-5" fill="#C6C6C6" x="67" y="82" width="72" height="6"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 79.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-Copy-6" fill="#C6C6C6" x="67" y="120" width="72" height="6"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

14
thumbnails/recursive-list.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>recursive-list</title>
<g id="recursive-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
<text id="–-Item-1-•-Item-1a-•" fill="#161616">
<tspan x="120" y="54">– Item 1</tspan>
<tspan x="120" y="70"> • Item 1a</tspan>
<tspan x="120" y="86"> • Item 1b</tspan>
<tspan x="120" y="102">– Item 2</tspan>
<tspan x="120" y="118"> • Item 2a</tspan>
<tspan x="120" y="134"> • Item 2b</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 863 B

47
thumbnails/selectable-tile.svg Normal file
View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>selectable-tile</title>
<defs>
<circle id="path-1" cx="6.5" cy="6.5" r="5.6875"></circle>
<polygon id="path-3" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
<circle id="path-5" cx="6.5" cy="6.5" r="5.6875"></circle>
<polygon id="path-7" points="5.6875 8.734375 3.65625 6.703125 4.3021875 6.09375 5.6875 7.4546875 8.6978125 4.46875 9.34375 5.110625"></polygon>
</defs>
<g id="selectable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-Copy-2" transform="translate(56.000000, 109.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group" transform="translate(56.000000, 33.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
</g>
<g id="Group-Copy" transform="translate(56.000000, 71.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="141" height="38"></rect>
<rect id="Rectangle" stroke="#161616" stroke-width="0.8" x="0" y="0" width="208" height="38"></rect>
</g>
<rect id="Rectangle-Copy-4" fill="#C6C6C6" x="67" y="44" width="72" height="6"></rect>
<rect id="Rectangle-Copy-5" fill="#C6C6C6" x="67" y="82" width="72" height="6"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 41.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<g id="icon/status/checkmark-filled/16" transform="translate(243.000000, 79.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-5"></use>
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-7"></use>
</g>
<rect id="Rectangle-Copy-6" fill="#C6C6C6" x="67" y="120" width="72" height="6"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

15
thumbnails/skeleton-placeholder.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton-placeholder</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton-placeholder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="118" y="48" width="85" height="85"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="117" y="48" width="56.4662577" height="85"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(177.733129, 90.500000) scale(-1, 1) translate(-177.733129, -90.500000) " x="173.466258" y="48" width="8.533742" height="85"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

15
thumbnails/skeleton-text.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton-text</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 989 B

15
thumbnails/skeleton.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 979 B

34
thumbnails/toast-notification.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>toast-notification</title>
<defs>
<circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
<polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
</defs>
<g id="toast-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="56" width="200" height="68"></rect>
<rect id="Path-Copy-2" fill="#DA1E28" x="60" y="56" width="3" height="68"></rect>
<g id="Group" transform="translate(73.000000, 68.000000)">
<g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
<g id="error--filled" transform="translate(0.875000, 0.875000)">
<g id="icon-2">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
</g>
<g id="icon-1" transform="translate(2.625000, 2.625000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#000000" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
</g>
</g>
<rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
</g>
</g>
<rect id="Rectangle-Copy-14" fill="#F4F4F4" x="95" y="72" width="71.1191279" height="5"></rect>
<rect id="Rectangle-Copy-23" fill="#E0E0E0" x="95" y="105" width="93.8444444" height="5"></rect>
<rect id="Rectangle-Copy-24" fill="#E0E0E0" x="95" y="82" width="123" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

27
thumbnails/tooltip-icon.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>tooltip-icon</title>
<defs>
<path d="M7.03125,8.90625 L7.03125,4.6875 L5.15625,4.6875 L5.15625,5.625 L6.09375,5.625 L6.09375,8.90625 L4.6875,8.90625 L4.6875,9.84375 L8.4375,9.84375 L8.4375,8.90625 L7.03125,8.90625 L7.03125,8.90625 Z M6.5625,2.34375 C6.17417479,2.34375 5.859375,2.65854979 5.859375,3.046875 C5.859375,3.43520021 6.17417479,3.75 6.5625,3.75 C6.95082521,3.75 7.265625,3.43520021 7.265625,3.046875 C7.265625,2.65854979 6.95082521,2.34375 6.5625,2.34375 L6.5625,2.34375 Z M6.5625,13.125 C2.93813133,13.125 0,10.1868687 0,6.5625 C0,2.93813133 2.93813133,0 6.5625,0 C10.1868687,0 13.125,2.93813133 13.125,6.5625 C13.1209442,10.1851874 10.1851874,13.1209442 6.5625,13.125 Z M6.5625,0.9375 C3.45589828,0.9375 0.9375,3.45589828 0.9375,6.5625 C0.9375,9.66910172 3.45589828,12.1875 6.5625,12.1875 C9.66910172,12.1875 12.1875,9.66910172 12.1875,6.5625 C12.1840384,3.45733327 9.66766673,0.940961641 6.5625,0.9375 Z" id="path-1"></path>
</defs>
<g id="tooltip-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-56-Copy" transform="translate(100.000000, 78.700000)">
<path d="M80.3,-38.1 C81.1284271,-38.1 81.8,-37.4284271 81.8,-36.6 L81.8,54.4 C81.8,55.2284271 81.1284271,55.9 80.3,55.9 L75.161,55.9 L70.4045455,61.1 L65.647,55.9 L60.3,55.9 C59.4715729,55.9 58.8,55.2284271 58.8,54.4 L58.8,-36.6 C58.8,-37.4284271 59.4715729,-38.1 60.3,-38.1 L80.3,-38.1 Z" id="Rectangle-24" fill="#3D3D3D" transform="translate(70.300000, 11.500000) rotate(90.000000) translate(-70.300000, -11.500000) "></path>
<g id="Group" transform="translate(0.000000, 4.300000)">
<g id="information" transform="translate(0.937500, 0.937500)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)">
<g transform="translate(-0.937500, -0.937500)" id="icon-color">
<rect id="Rectangle-3-Copy" fill="#161616" x="0" y="0" width="37.5" height="37.5"></rect>
</g>
</g>
</g>
<rect id="transparent-rectangle" x="0" y="0" width="15" height="15"></rect>
</g>
<rect id="Rectangle-Copy" fill="#BEBEBE" x="35" y="9.3" width="59" height="5"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

9
thumbnails/truncate.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>truncate</title>
<g id="truncate" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" line-spacing="22">
<text id="Truncate…" fill="#161616">
<tspan x="131" y="92">Truncate…</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 528 B

12
thumbnails/unordered-list.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>unordered-list</title>
<g id="unordered-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
<text id="–-Unordered-List-–-U" fill="#161616">
<tspan x="113" y="70">– Unordered List</tspan>
<tspan x="113" y="86">– Unordered List</tspan>
<tspan x="113" y="102">– Unordered List</tspan>
<tspan x="113" y="118">– Unordered List </tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 779 B