mirror of
https://github.com/slint-ui/slint.git
synced 2025-11-02 12:58:23 +00:00
material: Fix info icons (https://github.com/slint-ui/material-components/issues/40)
* Fix info icons
* [autofix.ci] apply automated fixes
---------
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Imported from a772527057
This commit is contained in:
Nigel Breslaw
Olivier Goffart
parent
e25db9fa0b
commit
c2522c3d39
12 changed files with 130 additions and 89 deletions
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#gradient-main)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bell-ringing"><defs>
|
||||
<linearGradient id="gradient-main" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
</defs><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /><path d="M21 6.727a11.05 11.05 0 0 0 -2.794 -3.727" /><path d="M3 6.727a11.05 11.05 0 0 1 2.792 -3.727" /></svg>
|
||||
|
After Width: | Height: | Size: 854 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#gradient-main)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-files"><defs>
|
||||
<linearGradient id="gradient-main" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
</defs><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 3v4a1 1 0 0 0 1 1h4" /><path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" /><path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" /></svg>
|
||||
|
After Width: | Height: | Size: 798 B |
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-hand-click">
|
||||
<defs>
|
||||
<linearGradient id="gradient-main" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path stroke="url(#gradient-main)" d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5" />
|
||||
<path stroke="url(#gradient-main)" d="M11 11.5v-2a1.5 1.5 0 0 1 3 0v2.5" />
|
||||
<path stroke="url(#gradient-main)" d="M14 10.5a1.5 1.5 0 0 1 3 0v1.5" />
|
||||
<path stroke="url(#gradient-main)" d="M17 11.5a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
|
||||
<path stroke="url(#gradient-main)" d="M5 3l-1 -1" />
|
||||
<path stroke="url(#gradient-main)" d="M4 7h-1" />
|
||||
<path stroke="url(#gradient-main)" d="M14 3l1 -1" />
|
||||
<path stroke="url(#gradient-main)" d="M15 6h1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#gradient-main)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-info-octagon"><linearGradient id="gradient-main" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>
|
||||
|
After Width: | Height: | Size: 1,003 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#gradient-main)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-layout-navbar"><defs>
|
||||
<linearGradient id="gradient-main" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
</defs><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /><path d="M4 9l16 0" /></svg>
|
||||
|
After Width: | Height: | Size: 727 B |
|
|
@ -0,0 +1,8 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#gradient-main)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-loader"><defs>
|
||||
<linearGradient id="gradient-main" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
</defs><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 6l0 -3" /><path d="M16.25 7.75l2.15 -2.15" /><path d="M18 12l3 0" /><path d="M16.25 16.25l2.15 2.15" /><path d="M12 18l0 3" /><path d="M7.75 16.25l-2.15 2.15" /><path d="M6 12l-3 0" /><path d="M7.75 7.75l-2.15 -2.15" /></svg>
|
||||
|
After Width: | Height: | Size: 837 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#gradient-main)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-message-circle"><defs>
|
||||
<linearGradient id="gradient-main" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
</defs><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1" /></svg>
|
||||
|
After Width: | Height: | Size: 801 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#gradient-main)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-navigation"><defs>
|
||||
<linearGradient id="gradient-main" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
</defs><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 18.5l7.265 2.463c.196 .077 .42 .032 .57 -.116a.548 .548 0 0 0 .134 -.572l-7.969 -17.275l-7.97 17.275c-.07 .2 -.017 .424 .135 .572c.15 .148 .374 .193 .57 .116l7.265 -2.463" /></svg>
|
||||
|
After Width: | Height: | Size: 797 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#gradient-main)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-play-card"><defs>
|
||||
<linearGradient id="gradient-main" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
</defs><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 5v14a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z" /><path d="M8 6h.01" /><path d="M16 18h.01" /><path d="M12 16l-3 -4l3 -4l3 4z" /></svg>
|
||||
|
After Width: | Height: | Size: 781 B |
|
|
@ -42,86 +42,46 @@ const {
|
|||
itemClasses?.panel
|
||||
)}
|
||||
>
|
||||
{(icon || defaultIcon) && (
|
||||
[
|
||||
'tabler:hand-click',
|
||||
'tabler:forms',
|
||||
'tabler:library',
|
||||
'tabler:message-circle',
|
||||
'tabler:navigation',
|
||||
'tabler:layout-navbar',
|
||||
'tabler:loader',
|
||||
'tabler:notification',
|
||||
'tabler:info-circle',
|
||||
].includes(icon || "") ? (
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="url(#gradient-main)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2 w-10 h-10">
|
||||
<defs>
|
||||
<linearGradient id="gradient-main" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#3b82f6" />
|
||||
<stop offset="50%" stop-color="#a21caf" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{icon === 'tabler:hand-click' && <>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5" />
|
||||
<path d="M11 11.5v-2a1.5 1.5 0 0 1 3 0v2.5" />
|
||||
<path d="M14 10.5a1.5 1.5 0 0 1 3 0v1.5" />
|
||||
<path d="M17 11.5a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
|
||||
<path d="M5 3l-1 -1" />
|
||||
<path d="M4 7h-1" />
|
||||
<path d="M14 3l1 -1" />
|
||||
<path d="M15 6h1" />
|
||||
</>}
|
||||
{icon === 'tabler:forms' && <>
|
||||
<rect x="4" y="4" width="16" height="16" rx="2" />
|
||||
<path d="M8 10h8" />
|
||||
<path d="M8 14h6" />
|
||||
</>}
|
||||
{icon === 'tabler:library' && <>
|
||||
<rect x="4" y="4" width="16" height="16" rx="2" />
|
||||
<path d="M8 4v16" />
|
||||
<path d="M16 4v16" />
|
||||
<path d="M4 8h16" />
|
||||
<path d="M4 16h16" />
|
||||
</>}
|
||||
{icon === 'tabler:message-circle' && <>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z" />
|
||||
<path d="M12 9h.01" />
|
||||
<path d="M11 12h1v4h1" />
|
||||
</>}
|
||||
{icon === 'tabler:navigation' && <>
|
||||
<polygon points="12 3 20 21 12 17 4 21 12 3" />
|
||||
</>}
|
||||
{icon === 'tabler:layout-navbar' && <>
|
||||
<rect x="4" y="6" width="16" height="12" rx="2" />
|
||||
<path d="M4 10h16" />
|
||||
</>}
|
||||
{icon === 'tabler:loader' && <>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M12 6l0 -3" />
|
||||
<path d="M16.25 7.75l2.15 -2.15" />
|
||||
<path d="M18 12l3 0" />
|
||||
<path d="M16.25 16.25l2.15 2.15" />
|
||||
<path d="M12 18l0 3" />
|
||||
<path d="M7.75 16.25l-2.15 2.15" />
|
||||
<path d="M6 12l-3 0" />
|
||||
<path d="M7.75 7.75l-2.15 -2.15" />
|
||||
</>}
|
||||
{icon === 'tabler:notification' && <>
|
||||
<path d="M18 8a6 6 0 0 0 -12 0c0 7 -3 9 -3 9h18s-3 -2 -3 -9" />
|
||||
<path d="M13.73 21a2 2 0 0 1 -3.46 0" />
|
||||
</>}
|
||||
{icon === 'tabler:info-circle' && <>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M12 9h.01" />
|
||||
<path d="M11 12h1v4h1" />
|
||||
</>}
|
||||
</svg>
|
||||
) : (
|
||||
<Icon name={icon || defaultIcon} class={twMerge('mb-2 w-10 h-10', defaultIconClass, itemClasses?.icon)} />
|
||||
)
|
||||
{icon && [
|
||||
'buttons',
|
||||
'forms',
|
||||
'snackbars',
|
||||
'cards',
|
||||
'navigation',
|
||||
'appbar',
|
||||
'tooltips',
|
||||
'progress-indicators',
|
||||
'dialogs',
|
||||
].includes(icon) && (
|
||||
<>
|
||||
{icon === 'buttons' && (
|
||||
<img src="/src/assets/images/icons/hand-click.svg" alt="Hand Click Icon" class="mb-2 w-10 h-10" />
|
||||
)}
|
||||
{icon === 'forms' && (
|
||||
<img src="/src/assets/images/icons/files.svg" alt="Hand Click Icon" class="mb-2 w-10 h-10" />
|
||||
)}
|
||||
{icon === 'snackbars' && (
|
||||
<img src="/src/assets/images/icons/bell-ringing.svg" alt="Loader Icon" class="mb-2 w-10 h-10" />
|
||||
)}
|
||||
{icon === 'cards' && (
|
||||
<img src="/src/assets/images/icons/play-card.svg" alt="Loader Icon" class="mb-2 w-10 h-10" />
|
||||
)}
|
||||
{icon === 'navigation' && (
|
||||
<img src="/src/assets/images/icons/navigation.svg" alt="Loader Icon" class="mb-2 w-10 h-10" />
|
||||
)}
|
||||
{icon === 'dialogs' && (
|
||||
<img src="/src/assets/images/icons/message-circle.svg" alt="Loader Icon" class="mb-2 w-10 h-10" />
|
||||
)}
|
||||
{icon === 'progress-indicators' && (
|
||||
<img src="/src/assets/images/icons/loader.svg" alt="Loader Icon" class="mb-2 w-10 h-10" />
|
||||
)}
|
||||
{icon === 'tooltips' && (
|
||||
<img src="/src/assets/images/icons/info-octagon.svg" alt="Loader Icon" class="mb-2 w-10 h-10" />
|
||||
)}
|
||||
{icon === 'appbar' && (
|
||||
<img src="/src/assets/images/icons/layout-navbar.svg" alt="Loader Icon" class="mb-2 w-10 h-10" />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</div>
|
||||
{description && (
|
||||
|
|
|
|||
|
|
@ -181,52 +181,52 @@ const metadata = {
|
|||
title: 'Buttons',
|
||||
description:
|
||||
"Multiple button variants including filled, outlined, and tonal styles for different interaction contexts.",
|
||||
icon: 'tabler:hand-click',
|
||||
icon: 'buttons',
|
||||
},
|
||||
{
|
||||
title: 'Form Controls',
|
||||
description: 'Text fields, checkboxes, switches, and other input components for user data collection.',
|
||||
icon: 'tabler:forms',
|
||||
icon: 'forms',
|
||||
},
|
||||
{
|
||||
title: 'Cards',
|
||||
description:
|
||||
'Content containers with elevation and various layouts for displaying information in organized, visually appealing ways.',
|
||||
icon: 'tabler:library',
|
||||
icon: 'cards',
|
||||
},
|
||||
{
|
||||
title: 'Dialogs',
|
||||
description:
|
||||
"Modal interfaces for important actions, confirmations, and detailed information that require user attention.",
|
||||
icon: 'tabler:message-circle',
|
||||
icon: 'dialogs',
|
||||
},
|
||||
{
|
||||
title: 'Navigation',
|
||||
description:
|
||||
'Drawers, navigation rails, and bottom navigation bars for seamless app navigation and structure.',
|
||||
icon: 'tabler:navigation',
|
||||
icon: 'navigation',
|
||||
},
|
||||
{
|
||||
title: 'App Bars',
|
||||
description: "Top-level navigation components with actions, titles, and search functionality for your app's main interface.",
|
||||
icon: 'tabler:layout-navbar',
|
||||
icon: 'appbar',
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Progress Indicators',
|
||||
description: 'Loading spinners and progress bars to provide feedback during operations and data loading.',
|
||||
icon: 'tabler:loader',
|
||||
icon: 'progress-indicators',
|
||||
},
|
||||
{
|
||||
title: 'Snackbars',
|
||||
description:
|
||||
'Brief notifications that appear at the bottom of the screen to provide feedback and confirm actions.',
|
||||
icon: 'tabler:notification',
|
||||
icon: 'snackbars',
|
||||
},
|
||||
{
|
||||
title: 'Tooltips',
|
||||
description: "Contextual help and information that appears when users hover or focus on interface elements.",
|
||||
icon: 'tabler:info-circle',
|
||||
icon: 'tooltips',
|
||||
},
|
||||
]}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue