mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
chore(studio): file explorer rows (#43845)
## What kind of change does this PR introduce? UI touch-up ## What is the current behavior? Explorer rows in file storage is a bit rough around the edges. ## What is the new behavior? - Consistent loaders - Consistent icons Also includes: - Fix to `stroke-width` on files-bucket.svg as documented in icons.mdx | Before | After | | --- | --- | | <img width="1024" height="563" alt="Buckets Storage AWS Healthy Toolshed Supabase" src="https://github.com/user-attachments/assets/055518b2-6d93-4c9d-879b-6e7dd51e0620" /> | <img width="1024" height="563" alt="Buckets Storage AWS Healthy Toolshed Supabase" src="https://github.com/user-attachments/assets/fae05446-95d9-4ca1-b441-7cd39d1c6036" /> |
This commit is contained in:
Danny White authored and GitHub committed
1 parent
d49da89517
commit
89895a7286
9 files changed
+56
-89
No files matched your search
@@ -45,7 +45,7 @@ function app() {
|
||||
}
|
||||
```
|
||||
|
||||
**Default props**: All icons default to `size={24}`. Stroke and fill defaults come from the source SVG's root attributes (e.g. `stroke-width="1"` in the source becomes the component's default `strokeWidth`). Override these props as needed for your use case.
|
||||
**Default props**: All icons default to `size={24}`. Stroke and fill defaults come from the source SVG's root attributes (e.g. `stroke-width="1"` on the root `<svg>` becomes the component's default `strokeWidth`). You can override those defaults at the call site, but any `stroke`, `fill`, or `stroke-width` set on individual child paths will still win.
|
||||
|
||||
### Adding new custom icons
|
||||
|
||||
@@ -63,7 +63,7 @@ Follow these steps to add a new custom icon to the Supabase icon library.
|
||||
|
||||
For **fill-only icons** (e.g. logos that use shapes instead of strokes), add `stroke="none"` to the root `<svg>` element. The build will propagate this so the component never renders an unwanted stroke.
|
||||
|
||||
Leave attributes like `stroke-width` as they are. The root SVG's `fill`, `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin` attributes are automatically propagated as the component's defaults by the build process. The conversion to camel-case for React compatibility (e.g. `strokeWidth`) is also handled automatically.
|
||||
Prefer putting shared styling like `fill`, `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin` on the root `<svg>`. The build propagates those root attributes as the component's defaults, and also converts them to camel-case for React compatibility (e.g. `strokeWidth`). If you put those attributes on individual child paths instead, they become fixed path-level styling and will override props passed to the component.
|
||||
|
||||
2. **Build the component**: Run `npm run build:icons` from inside the `packages/icons` directory
|
||||
|
||||
@@ -133,4 +133,4 @@ Note `stroke="none"` on the root to prevent unwanted strokes, and `fill="current
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
If your SVG specifies `stroke-width` attributes, they will override the component's `strokeWidth` prop. Remove stroke attributes from individual paths to let the component control them.
|
||||
If your SVG specifies `stroke-width` attributes on individual child paths, they will override the component's `strokeWidth` prop. Keep shared stroke attributes on the root `<svg>` and remove them from individual paths if you want consumers to control stroke weight.
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
Edit2,
|
||||
FolderPlus,
|
||||
List,
|
||||
Loader,
|
||||
LoaderCircle,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Upload,
|
||||
@@ -61,7 +61,7 @@ const HeaderPathEdit = ({ loading, isSearching, breadcrumbs, togglePathEdit }: a
|
||||
>
|
||||
{loading.isLoading ? (
|
||||
<div className="ml-2 flex items-center gap-x-3">
|
||||
<Loader size={14} strokeWidth={2} className="animate-spin" />
|
||||
<LoaderCircle size={14} strokeWidth={2} className="animate-spin" />
|
||||
<p className="text-sm text-foreground-light">{loading.message}</p>
|
||||
</div>
|
||||
) : (
|
||||
@@ -113,7 +113,7 @@ const HeaderBreadcrumbs = ({
|
||||
|
||||
return loading.isLoading ? (
|
||||
<div className="ml-2 flex items-center">
|
||||
<Loader size={16} strokeWidth={2} className="animate-spin" />
|
||||
<LoaderCircle size={14} strokeWidth={2} className="animate-spin text-foreground-lighter" />
|
||||
<p className="ml-3 text-sm">{loading.message}</p>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
||||
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
||||
import { FilesBucket as FilesBucketIcon } from 'icons'
|
||||
import { formatBytes } from 'lib/helpers'
|
||||
import { find, isEmpty, isEqual } from 'lodash'
|
||||
import {
|
||||
AlertCircle,
|
||||
@@ -7,20 +10,16 @@ import {
|
||||
Edit,
|
||||
File,
|
||||
Film,
|
||||
FolderOpen,
|
||||
Image,
|
||||
Loader,
|
||||
LoaderCircle,
|
||||
MoreVertical,
|
||||
Move,
|
||||
Music,
|
||||
Trash2,
|
||||
} from 'lucide-react'
|
||||
import { useContextMenu } from 'react-contexify'
|
||||
import SVG from 'react-inlinesvg'
|
||||
|
||||
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
||||
import { BASE_PATH } from 'lib/constants'
|
||||
import { formatBytes } from 'lib/helpers'
|
||||
import type { CSSProperties } from 'react'
|
||||
import { useContextMenu } from 'react-contexify'
|
||||
import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
|
||||
import {
|
||||
Checkbox,
|
||||
@@ -38,6 +37,7 @@ import {
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from 'ui'
|
||||
|
||||
import {
|
||||
CONTEXT_MENU_KEYS,
|
||||
STORAGE_ROW_STATUS,
|
||||
@@ -54,47 +54,42 @@ export const RowIcon = ({
|
||||
view,
|
||||
status,
|
||||
fileType,
|
||||
isOpened = false,
|
||||
mimeType,
|
||||
}: {
|
||||
view: STORAGE_VIEWS
|
||||
status: STORAGE_ROW_STATUS
|
||||
fileType: string
|
||||
isOpened?: boolean
|
||||
mimeType: string | undefined
|
||||
}) => {
|
||||
if (view === STORAGE_VIEWS.LIST && status === STORAGE_ROW_STATUS.LOADING) {
|
||||
return <Loader size={16} strokeWidth={2} className="animate-spin" />
|
||||
return (
|
||||
<LoaderCircle size={14} strokeWidth={2} className="animate-spin text-foreground-lighter" />
|
||||
)
|
||||
}
|
||||
|
||||
if (fileType === STORAGE_ROW_TYPES.BUCKET || fileType === STORAGE_ROW_TYPES.FOLDER) {
|
||||
const iconSrc =
|
||||
fileType === STORAGE_ROW_TYPES.BUCKET
|
||||
? `${BASE_PATH}/img/bucket-filled.svg`
|
||||
: fileType === STORAGE_ROW_TYPES.FOLDER
|
||||
? `${BASE_PATH}/img/folder-filled.svg`
|
||||
: `${BASE_PATH}/img/file-filled.svg`
|
||||
return (
|
||||
<SVG
|
||||
src={iconSrc}
|
||||
preProcessor={(code) =>
|
||||
code.replace(/svg/, 'svg class="w-4 h-4 text-color-inherit opacity-75"')
|
||||
}
|
||||
/>
|
||||
if (fileType === STORAGE_ROW_TYPES.FOLDER) {
|
||||
return isOpened ? (
|
||||
<FolderOpen size={16} strokeWidth={2} className="text-foreground-lighter" />
|
||||
) : (
|
||||
<FilesBucketIcon size={16} strokeWidth={2} className="text-foreground-lighter" />
|
||||
)
|
||||
}
|
||||
|
||||
if (mimeType?.includes('image')) {
|
||||
return <Image size={16} strokeWidth={2} />
|
||||
return <Image size={16} className="text-foreground-lighter" />
|
||||
}
|
||||
|
||||
if (mimeType?.includes('audio')) {
|
||||
return <Music size={16} strokeWidth={2} />
|
||||
return <Music size={16} strokeWidth={2} className="text-foreground-lighter" />
|
||||
}
|
||||
|
||||
if (mimeType?.includes('video')) {
|
||||
return <Film size={16} strokeWidth={2} />
|
||||
return <Film size={16} strokeWidth={2} className="text-foreground-lighter" />
|
||||
}
|
||||
|
||||
return <File size={16} strokeWidth={2} />
|
||||
return <File size={16} strokeWidth={2} className="text-foreground-lighter" />
|
||||
}
|
||||
|
||||
interface FileExplorerRowProps {
|
||||
@@ -173,19 +168,19 @@ export const FileExplorerRow = ({
|
||||
? [
|
||||
{
|
||||
name: 'Rename',
|
||||
icon: <Edit size={14} strokeWidth={1} />,
|
||||
icon: <Edit size={12} className="text-foreground-light" />,
|
||||
onClick: () => setSelectedItemToRename(itemWithColumnIndex),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
name: 'Download',
|
||||
icon: <Download size={14} strokeWidth={1} />,
|
||||
icon: <Download size={12} className="text-foreground-light" />,
|
||||
onClick: () => downloadFolder(itemWithColumnIndex),
|
||||
},
|
||||
{
|
||||
name: 'Copy path to folder',
|
||||
icon: <Copy size={14} strokeWidth={1} />,
|
||||
icon: <Copy size={12} className="text-foreground-light" />,
|
||||
onClick: () => copyPathToFolder(openedFolders, itemWithColumnIndex),
|
||||
},
|
||||
...(canUpdateFiles
|
||||
@@ -193,7 +188,7 @@ export const FileExplorerRow = ({
|
||||
{ name: 'Separator', icon: undefined, onClick: undefined },
|
||||
{
|
||||
name: 'Delete',
|
||||
icon: <Trash2 size={14} strokeWidth={1} />,
|
||||
icon: <Trash2 size={12} className="text-foreground-light" />,
|
||||
onClick: () => setSelectedItemsToDelete([itemWithColumnIndex]),
|
||||
},
|
||||
]
|
||||
@@ -206,14 +201,14 @@ export const FileExplorerRow = ({
|
||||
? [
|
||||
{
|
||||
name: 'Get URL',
|
||||
icon: <Copy size={14} strokeWidth={1} />,
|
||||
icon: <Copy size={12} className="text-foreground-light" />,
|
||||
onClick: () => onCopyUrl(itemWithColumnIndex.name),
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: 'Get URL',
|
||||
icon: <Copy size={14} strokeWidth={1} />,
|
||||
icon: <Copy size={12} className="text-foreground-light" />,
|
||||
children: [
|
||||
{
|
||||
name: 'Expire in 1 week',
|
||||
@@ -239,19 +234,19 @@ export const FileExplorerRow = ({
|
||||
]),
|
||||
{
|
||||
name: 'Download',
|
||||
icon: <Download size={14} strokeWidth={1} />,
|
||||
icon: <Download size={12} className="text-foreground-light" />,
|
||||
onClick: () => downloadFile(itemWithColumnIndex),
|
||||
},
|
||||
...(canUpdateFiles
|
||||
? [
|
||||
{
|
||||
name: 'Rename',
|
||||
icon: <Edit size={14} strokeWidth={1} />,
|
||||
icon: <Edit size={12} className="text-foreground-light" />,
|
||||
onClick: () => setSelectedItemToRename(itemWithColumnIndex),
|
||||
},
|
||||
{
|
||||
name: 'Move',
|
||||
icon: <Move size={14} strokeWidth={1} />,
|
||||
icon: <Move size={12} className="text-foreground-light" />,
|
||||
onClick: () => setSelectedItemsToMove([itemWithColumnIndex]),
|
||||
},
|
||||
{ name: 'Separator', icon: undefined, onClick: undefined },
|
||||
@@ -263,7 +258,7 @@ export const FileExplorerRow = ({
|
||||
? [
|
||||
{
|
||||
name: 'Delete',
|
||||
icon: <Trash2 size={14} strokeWidth={1} />,
|
||||
icon: <Trash2 size={12} className="text-foreground-light" />,
|
||||
onClick: () => setSelectedItemsToDelete([itemWithColumnIndex]),
|
||||
},
|
||||
]
|
||||
@@ -324,7 +319,7 @@ export const FileExplorerRow = ({
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
if (item.status !== STORAGE_ROW_STATUS.LOADING && !isOpened && !isPreviewed) {
|
||||
item.type === STORAGE_ROW_TYPES.FOLDER || item.type === STORAGE_ROW_TYPES.BUCKET
|
||||
item.type === STORAGE_ROW_TYPES.FOLDER
|
||||
? openFolder(columnIndex, item)
|
||||
: onSelectFile(columnIndex)
|
||||
}
|
||||
@@ -348,6 +343,7 @@ export const FileExplorerRow = ({
|
||||
view={view}
|
||||
status={item.status}
|
||||
fileType={item.type}
|
||||
isOpened={isOpened}
|
||||
mimeType={item.metadata?.mimetype}
|
||||
/>
|
||||
</div>
|
||||
@@ -398,9 +394,9 @@ export const FileExplorerRow = ({
|
||||
}
|
||||
>
|
||||
{item.status === STORAGE_ROW_STATUS.LOADING ? (
|
||||
<Loader
|
||||
className={`animate-spin ${view === STORAGE_VIEWS.LIST ? 'invisible' : ''}`}
|
||||
size={16}
|
||||
<LoaderCircle
|
||||
className={`animate-spin text-foreground-lighter ${view === STORAGE_VIEWS.LIST ? 'invisible' : ''}`}
|
||||
size={14}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { Transition } from '@headlessui/react'
|
||||
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
||||
import { isEmpty } from 'lodash'
|
||||
import { AlertCircle, ChevronDown, Copy, Download, Loader, Trash2, X } from 'lucide-react'
|
||||
import SVG from 'react-inlinesvg'
|
||||
|
||||
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
|
||||
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
||||
import { BASE_PATH } from 'lib/constants'
|
||||
import { formatBytes } from 'lib/helpers'
|
||||
import { isEmpty } from 'lodash'
|
||||
import { AlertCircle, ChevronDown, Copy, Download, LoaderCircle, Trash2, X } from 'lucide-react'
|
||||
import SVG from 'react-inlinesvg'
|
||||
import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
|
||||
import {
|
||||
Button,
|
||||
@@ -16,6 +15,7 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from 'ui'
|
||||
|
||||
import { URL_EXPIRY_DURATION } from '../Storage.constants'
|
||||
import { StorageItem } from '../Storage.types'
|
||||
import { useCopyUrl } from './useCopyUrl'
|
||||
@@ -41,7 +41,7 @@ const PreviewFile = ({ item }: { item: StorageItem }) => {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center text-foreground-lighter">
|
||||
<Loader size={14} strokeWidth={2} className="animate-spin" />
|
||||
<LoaderCircle size={14} strokeWidth={2} className="animate-spin text-foreground-lighter" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="23px" height="21px" viewBox="0 0 23 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
|
||||
<title>Group 6</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group-6">
|
||||
<path d="M0,2 C4.08145016,2.66666667 7.74811683,3 11,3 C14.2518832,3 17.9185498,2.66666667 22,2 L19.1660126,18.0592619 C19.055643,18.6846956 18.6547827,19.2205336 18.0859564,19.5029965 C16.07617,20.5009988 13.7141845,21 11,21 C8.28582036,21 5.92383852,20.5010006 3.9140545,19.5030018 C3.34522199,19.2205451 2.94435968,18.6847049 2.83398858,18.0592686 L0,2 L0,2 Z" id="Rectangle" fill="#888888"></path>
|
||||
<ellipse id="Oval" fill="#727272" cx="11" cy="2" rx="11" ry="2"></ellipse>
|
||||
<circle id="Oval" fill="#727272" cx="11" cy="7.5" r="1.5"></circle>
|
||||
<path d="M11.5,8 C16.1151574,10.3589239 19.1151574,11.6922572 20.5,12 C21.8848426,12.3077428 21.8848426,11.6532252 20.5,10.0364473" id="Line" stroke="#727272" stroke-linecap="square"></path>
|
||||
<rect id="Rectangle" fill="#888888" transform="translate(19.706608, 9.250860) rotate(10.000000) translate(-19.706608, -9.250860) " x="18.7066082" y="7.75085981" width="2" height="3"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="21px" viewBox="0 0 24 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
|
||||
<title>Group 5</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group-5">
|
||||
<path d="M2,0 L9.88060242,0 L9.88060242,0 L11.3224046,0.774228654 C11.6133185,0.930445558 11.9383852,1.01220287 12.2685891,1.01220287 L22,1.01220287 C23.1045695,1.01220287 24,1.90763337 24,3.01220287 L24,19 C24,20.1045695 23.1045695,21 22,21 L2,21 C0.8954305,21 1.3527075e-16,20.1045695 0,19 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="Rectangle" fill="#727272"></path>
|
||||
<path d="M2,4.95404091 L10.0483363,4.95404091 L10.0483363,4.95404091 L11.4020388,3.59077368 C11.7775083,3.21265135 12.288349,3 12.8212221,3 L22,3 C23.1045695,3 24,3.8954305 24,5 L24,18 C24,19.1045695 23.1045695,20 22,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,6.95404091 C-1.3527075e-16,5.84947141 0.8954305,4.95404091 2,4.95404091 Z" id="Rectangle" fill="#888888"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -148,10 +148,10 @@ export const Index: Record<string, any> = [
|
||||
name: "files-bucket",
|
||||
componentName: "FilesBucket",
|
||||
deprecated: false,
|
||||
raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name FilesBucket\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview \n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst FilesBucket = createSupabaseIcon(\n 'FilesBucket',\n [\n [\n 'path',\n {\n d: 'M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z',\n stroke: 'currentColor',\n 'stroke-width': '1.5',\n 'stroke-linecap': 'round',\n 'stroke-linejoin': 'round',\n key: 'o4u44y',\n },\n ],\n [\n 'path',\n {\n d: 'M5 10.5H19',\n stroke: 'currentColor',\n 'stroke-width': '1.5',\n 'stroke-linecap': 'round',\n 'stroke-linejoin': 'round',\n key: 'cf9ou5',\n },\n ],\n ],\n { fill: 'none' },\n);\n\nexport default FilesBucket;\n",
|
||||
raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name FilesBucket\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview \n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst FilesBucket = createSupabaseIcon(\n 'FilesBucket',\n [\n [\n 'path',\n {\n d: 'M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z',\n stroke: 'currentColor',\n 'stroke-linecap': 'round',\n 'stroke-linejoin': 'round',\n key: '1i7att',\n },\n ],\n [\n 'path',\n {\n d: 'M5 10.5H19',\n stroke: 'currentColor',\n 'stroke-linecap': 'round',\n 'stroke-linejoin': 'round',\n key: 'ys6uda',\n },\n ],\n ],\n { fill: 'none', strokeWidth: '1.5' },\n);\n\nexport default FilesBucket;\n",
|
||||
component: React.lazy(() => import('icons/src/icons/files-bucket')),
|
||||
import: "import { FilesBucket } from 'icons'",
|
||||
svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M5 10.5H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
|
||||
svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M5 10.5H19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
|
||||
jsx: "import { FilesBucket } from \"icons\"\n <FilesBucket/>\n "
|
||||
},
|
||||
{
|
||||
|
||||
@@ -4,7 +4,7 @@ import createSupabaseIcon from '../createSupabaseIcon';
|
||||
* @component @name FilesBucket
|
||||
* @description Supabase SVG icon component, renders SVG Element with children.
|
||||
*
|
||||
* @preview 
|
||||
* @preview 
|
||||
*
|
||||
* @param {Object} props - Supabase icons props and any valid SVG attribute
|
||||
* @returns {JSX.Element} JSX Element
|
||||
@@ -18,10 +18,9 @@ const FilesBucket = createSupabaseIcon(
|
||||
{
|
||||
d: 'M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '1.5',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
key: 'o4u44y',
|
||||
key: '1i7att',
|
||||
},
|
||||
],
|
||||
[
|
||||
@@ -29,14 +28,13 @@ const FilesBucket = createSupabaseIcon(
|
||||
{
|
||||
d: 'M5 10.5H19',
|
||||
stroke: 'currentColor',
|
||||
'stroke-width': '1.5',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
key: 'cf9ou5',
|
||||
key: 'ys6uda',
|
||||
},
|
||||
],
|
||||
],
|
||||
{ fill: 'none' },
|
||||
{ fill: 'none', strokeWidth: '1.5' },
|
||||
);
|
||||
|
||||
export default FilesBucket;
|
||||
@@ -1,4 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 10.5H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.99988 20H19.9999C20.5303 20 21.039 19.7893 21.4141 19.4142C21.7892 19.0391 21.9999 18.5304 21.9999 18V8C21.9999 7.46957 21.7892 6.96086 21.4141 6.58579C21.039 6.21071 20.5303 6 19.9999 6H12.0699C11.7405 5.9983 11.4166 5.91525 11.127 5.75824C10.8374 5.60123 10.5911 5.37512 10.4099 5.1L9.58988 3.9C9.4087 3.62488 9.16237 3.39877 8.87278 3.24176C8.58319 3.08475 8.25929 3.0017 7.92988 3H3.99988C3.46944 3 2.96074 3.21071 2.58566 3.58579C2.21059 3.96086 1.99988 4.46957 1.99988 5V18C1.99988 19.1 2.89988 20 3.99988 20Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5 10.5H19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 833 B After Width: | Height: | Size: 814 B |
Reference in new issue
Block a user