Compare commits
66 Commits
2dd911dbc5
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 94acacbd6c | |||
| 6811dda340 | |||
| bd0e5b0191 | |||
| 23a4175bc6 | |||
| 30a3b32d13 | |||
| 0405565fd1 | |||
| 352ec260fa | |||
| 53b3ee4301 | |||
| 88d56bbd38 | |||
| a40c1d1a7e | |||
| 237abcbd63 | |||
| 4777b1c68e | |||
| 4adc9b9eb6 | |||
| acc9bcb98b | |||
| 33131a8275 | |||
| 131d8376d4 | |||
| 71effe979a | |||
| 06a1695be4 | |||
| 734a593834 | |||
| a2ae6ce8a2 | |||
| 078b1d6e85 | |||
| 5bcf5b20a0 | |||
| e0ed0f557b | |||
| 276bb36586 | |||
| b697bb8491 | |||
| 5edab8d12d | |||
| c15a6ceff1 | |||
| f56077dba4 | |||
| 6595e8f4e0 | |||
| ca983468f0 | |||
| cd75e773f6 | |||
| 75aa782653 | |||
| f6594822c6 | |||
| 027cec577d | |||
| 6e077aaeed | |||
| 1d9001705f | |||
| 1878ec3a0e | |||
| b48581b089 | |||
| 3593305512 | |||
| 6967f3c7cd | |||
| dea517fbe5 | |||
| cc54ae46ff | |||
| b2f4cfe393 | |||
| 3e4d609d6c | |||
| 455acd9552 | |||
| 50e7618232 | |||
| c4eb4cc507 | |||
| 08a6e82760 | |||
| 2e36ac3b3e | |||
| 46020db913 | |||
| bacbde56ad | |||
| f8f2e23573 | |||
| b2a61008ba | |||
| 5d65cecf52 | |||
| c80d9b5259 | |||
| 3e6d89830b | |||
| f88dd862bf | |||
| 8c1e36aaa7 | |||
| 03a92db05e | |||
| 7c65e70c8f | |||
| b61720fd24 | |||
| 4d7c882324 | |||
| c508d6ae31 | |||
| 02ae2b143e | |||
| 40505bd05e | |||
| ef22eb5615 |
@@ -0,0 +1,37 @@
|
|||||||
|
name: Deploy Documentation
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
check-and-deploy:
|
||||||
|
runs-on: host
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Install Node.js requirements for Actions
|
||||||
|
run: |
|
||||||
|
if ! command -v node &> /dev/null; then
|
||||||
|
apk add --no-cache nodejs npm
|
||||||
|
fi
|
||||||
|
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
with:
|
||||||
|
fetch-depth: 2
|
||||||
|
|
||||||
|
- name: Install dependencies
|
||||||
|
run: npm ci --legacy-peer-deps
|
||||||
|
|
||||||
|
- name: Build documentation
|
||||||
|
run: npm run build
|
||||||
|
|
||||||
|
- name: Deploy to Apache volume
|
||||||
|
run: |
|
||||||
|
find /var/www/design-system -mindepth 1 -delete
|
||||||
|
|
||||||
|
cp -r dist/. /var/www/design-system/
|
||||||
|
|
||||||
|
chmod -R 755 /var/www/design-system/
|
||||||
@@ -43,7 +43,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
if: steps.version_check.outputs.changed == 'true'
|
if: steps.version_check.outputs.changed == 'true'
|
||||||
run: npm ci
|
run: npm ci --legacy-peer-deps
|
||||||
|
|
||||||
- name: Publish
|
- name: Publish
|
||||||
if: steps.version_check.outputs.changed == 'true'
|
if: steps.version_check.outputs.changed == 'true'
|
||||||
|
|||||||
@@ -0,0 +1,18 @@
|
|||||||
|
# Attribution
|
||||||
|
|
||||||
|
This file lists all third-party assets used within Nova Design System (NDS) that are not proprietary to the project, as referenced in `LICENSE.md` (section 4.1).
|
||||||
|
|
||||||
|
## Icons
|
||||||
|
|
||||||
|
As of version `1.00.3`, NDS no longer ships a custom set of per-icon SVG wrapper components. All icons rendered inside NDS components (e.g. `Select`, `Avatar`, `Notification`, `numericStepper`, `Modal`) are sourced directly from the **[Lucide](https://lucide.dev/)** icon set via the **[`@lucide/astro`](https://www.npmjs.com/package/@lucide/astro)** package (license: **ISC** — no attribution required, commercial use allowed).
|
||||||
|
|
||||||
|
This means there is no longer a per-component mapping to maintain here: any icon visible in NDS is a Lucide icon, used directly through `@lucide/astro`. The previous standalone `Icons` component family (`Arrow2Icon`, `BinIcon`, `BurgerIcon`, `SortIcon`, `UploadIcon`, etc.) has been removed from the package.
|
||||||
|
|
||||||
|
## Custom Assets
|
||||||
|
|
||||||
|
Any icon or asset **not covered above** is created specifically for NDS and falls under section 4.2 of `LICENSE.md` instead. At the time of writing, there are no remaining custom (non-Lucide) icons in the project.
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- The Lucide icon set is released under the ISC license, which permits commercial use without requiring attribution. This file is maintained anyway for transparency and traceability.
|
||||||
|
- This file must be kept up to date whenever a new third-party icon set or asset is added to NDS.
|
||||||
@@ -8,27 +8,43 @@ This license applies to both the public and private versions of the repository.
|
|||||||
|
|
||||||
## 2. Usage Rights and Restrictions
|
## 2. Usage Rights and Restrictions
|
||||||
|
|
||||||
### 2.1 Personal and Internal Use
|
### 2.1 General Use
|
||||||
Use of NDS for personal projects and internal projects is permitted.
|
NDS may be used freely and without limitation in personal, internal, and commercial projects — including projects developed for paying clients, such as the design or development of a website, application, or service.
|
||||||
You may study the project and draw inspiration from it, but direct copying of the core logic, styles, or components is prohibited unless explicitly authorized.
|
|
||||||
|
|
||||||
### 2.2 Commercial Products and Services
|
You may study the project and draw inspiration from it, but direct copying of the core logic, styles, or components outside of using the library as intended is prohibited unless explicitly authorized.
|
||||||
Any use of NDS in a commercial product or service requires explicit written authorization from the original creator.
|
|
||||||
Only the original creator may grant that authorization.
|
|
||||||
Contributors do not have the authority to grant usage rights to third parties.
|
|
||||||
|
|
||||||
Selling a website, application, service, or product that uses NDS is prohibited unless a specific commercial agreement has been granted by the creator.
|
### 2.2 Billing and Resale Restriction
|
||||||
|
You may not charge or invoice anyone specifically **for the use of NDS itself**. This includes, but is not limited to:
|
||||||
|
- selling NDS as a standalone product or component library,
|
||||||
|
- sublicensing or redistributing NDS to third parties,
|
||||||
|
- adding a distinct line item, fee, or surcharge tied to "using NDS" on a client invoice,
|
||||||
|
- building a product or service (e.g. a SaaS) whose core purpose or monetized value is to give paying users access to NDS's components or their usage.
|
||||||
|
|
||||||
|
This restriction does **not** prevent you from billing normally for a broader deliverable (e.g. a website, application, or platform) simply because NDS was used as part of the underlying toolkit. In that case, NDS is a tool used to produce the deliverable, not the product being sold.
|
||||||
|
|
||||||
|
**Example — SaaS:** if you build a SaaS and NDS is merely used internally to build its interface (the same way any UI library would be), this is authorized. If, however, the SaaS's purpose or value proposition is to give users access to NDS's components or their usage (e.g. a website-builder that resells NDS components to its own customers), this is prohibited.
|
||||||
|
|
||||||
|
**Exception:** if a client explicitly requests that NDS specifically be used in their project, you may bill for that work as part of the agreed engagement, since the choice to use NDS was made knowingly by the client.
|
||||||
|
|
||||||
|
Only the original creator may authorize the sale, sublicensing, or commercial redistribution of NDS as a standalone product. Contributors do not have the authority to grant such rights to third parties.
|
||||||
|
|
||||||
## 3. Modifications and Contributions
|
## 3. Modifications and Contributions
|
||||||
All modifications to the library must go through the official GitHub workflow, including Issues and Pull Requests.
|
All modifications to the library must go through the official Gitea workflow on the project's self-hosted instance, including Issues and Pull Requests.
|
||||||
|
|
||||||
Any authorized modification or derivative work of NDS must remain under this same license.
|
Any authorized modification or derivative work of NDS must remain under this same license.
|
||||||
Re-licensing modified versions under a different license is prohibited.
|
Re-licensing modified versions under a different license is prohibited.
|
||||||
|
|
||||||
## 4. Assets and Iconography
|
## 4. Assets and Iconography
|
||||||
Icons and visual assets introduced into NDS remain part of the project.
|
|
||||||
Unless explicitly authorized, these assets may only be used through the NDS library itself.
|
### 4.1 Third-Party Icons
|
||||||
External reuse, extraction, redistribution, or standalone use of these assets is prohibited.
|
Some icons used within NDS are not proprietary to NDS and originate from public or third-party sources (e.g. Iconify). These icons remain governed by their own original license and attribution requirements, independently of this license.
|
||||||
|
|
||||||
|
A full list of these third-party icons, including their name, source (e.g. Iconify), and a link to their origin, is maintained in the `ATTRIBUTION.md` file at the root of the repository. Any icon not listed in `ATTRIBUTION.md` is presumed to fall under section 4.2.
|
||||||
|
|
||||||
|
### 4.2 Icons Created for NDS
|
||||||
|
Icons specifically created for NDS may be used outside of the NDS project, subject to the following conditions:
|
||||||
|
- they may not be sold or resold, whether individually, in a set, or as part of another icon library or product,
|
||||||
|
- their origin must be explicitly credited wherever they are used (e.g. "Icon from Nova Design System (NDS)" with a link to the project), in a clear and visible manner.
|
||||||
|
|
||||||
## 5. Disclaimer of Warranty and Liability
|
## 5. Disclaimer of Warranty and Liability
|
||||||
This library is provided on an **"as is"** basis, without warranty of any kind.
|
This library is provided on an **"as is"** basis, without warranty of any kind.
|
||||||
|
|||||||
@@ -6,15 +6,15 @@ Nova Design System (NDS) is a lightweight, responsive UI component library built
|
|||||||
|
|
||||||
## Table of Contents
|
## Table of Contents
|
||||||
|
|
||||||
1. [Overview](#overview)
|
1. [Overview](#user-content-overview)
|
||||||
2. [Project Status](#project-status)
|
2. [Project Status](#user-content-project-status)
|
||||||
3. [Core Principles](#core-principles)
|
3. [Core Principles](#user-content-core-principles)
|
||||||
4. [Available Components](#available-components)
|
4. [Available Components](#user-content-available-components)
|
||||||
5. [Design Tokens](#design-tokens)
|
5. [Design Tokens](#user-content-design-tokens)
|
||||||
6. [Installation](#installation)
|
6. [Installation](#user-content-installation)
|
||||||
7. [Usage](#usage)
|
7. [Usage](#user-content-usage)
|
||||||
8. [Development](#development)
|
8. [Development](#user-content-development)
|
||||||
9. [License](#license)
|
9. [License](#user-content-license)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -23,8 +23,7 @@ Nova Design System (NDS) is a lightweight, responsive UI component library built
|
|||||||
NDS provides a focused set of reusable Astro components with centralized design tokens, light/dark theming, and a strong focus on consistency and maintainability. The component documentation and showcase are also built with Astro.
|
NDS provides a focused set of reusable Astro components with centralized design tokens, light/dark theming, and a strong focus on consistency and maintainability. The component documentation and showcase are also built with Astro.
|
||||||
|
|
||||||
## Project Status
|
## Project Status
|
||||||
|
> **ALPHA** — The library is under active development. Current version: `1.2.1`. Component APIs, token naming, and internal architecture may change before a stable release.
|
||||||
> **ALPHA** — The library is under active development. Component APIs, token naming, and internal architecture may change before a stable release.
|
|
||||||
|
|
||||||
## Core Principles
|
## Core Principles
|
||||||
|
|
||||||
@@ -36,37 +35,54 @@ NDS provides a focused set of reusable Astro components with centralized design
|
|||||||
|
|
||||||
## Available Components
|
## Available Components
|
||||||
|
|
||||||
These are the components currently implemented in `src/components/`:
|
These are the components currently exported from the package (`src/components/index.ts`):
|
||||||
|
|
||||||
| Component | Category |
|
| Component | Category |
|
||||||
|---|---|
|
| -------------------------------------------------- | ------------ |
|
||||||
| `Button` | Actions |
|
| `Button` | Actions |
|
||||||
| `Toggle` | Actions |
|
| `Toggle` | Actions |
|
||||||
| `Tabs` / `Tab` / `TabItem` / `TabContent` | Navigation |
|
| `NumericStepper` | Actions |
|
||||||
| `Link` | Layout |
|
| `Select` / `SelectOption` | Actions |
|
||||||
| `ListItem` | Data Display |
|
| `TextField` | Forms |
|
||||||
| `Notifications` | Feedback |
|
| `Checkbox` | Forms |
|
||||||
| `Icons` | Utility |
|
| `Radio` | Forms |
|
||||||
|
| `Tab` / `TabItem` / `TabContent` | Navigation |
|
||||||
|
| `Link` | Navigation |
|
||||||
|
| `Breadcrumb` / `BreadcrumbItem` | Navigation |
|
||||||
|
| `Pagination` / `PaginationNumber` | Navigation |
|
||||||
|
| `Navbar` | Navigation |
|
||||||
|
| `Sidebar` / `SidebarItem` | Navigation |
|
||||||
|
| `Avatar` | Data Display |
|
||||||
|
| `Badge` | Data Display |
|
||||||
|
| `Card` | Data Display |
|
||||||
|
| `ListItem` / `ListItemTitle` / `ListItemSubtitle` | Data Display |
|
||||||
|
| `Notification` | Feedback |
|
||||||
|
| `LoadingBar` | Feedback |
|
||||||
|
| `Tooltip` | Feedback |
|
||||||
|
| `Modal` | Overlay |
|
||||||
|
|
||||||
> Many components listed in earlier versions of this README (Navbar, Sidebar, Card, Modal, etc.) are planned but not yet implemented.
|
> Icons are no longer shipped as standalone NDS components. As of `1.00.3`, all icons used internally (e.g. in `Select`, `Avatar`, `Notification`, `numericStepper`) come directly from the **[`@lucide/astro`](https://www.npmjs.com/package/@lucide/astro)** package. See `ATTRIBUTION.md` for details.
|
||||||
|
|
||||||
## Design Tokens
|
## Design Tokens
|
||||||
|
|
||||||
All styling is controlled via CSS custom properties prefixed with `--nds-`, defined in `src/styles/tokens/`:
|
All styling is controlled via CSS custom properties prefixed with `--nds-`, defined in `src/styles/tokens/`:
|
||||||
|
|
||||||
| File | Contents |
|
| File | Contents |
|
||||||
|---|---|
|
| ------------------ | ------------------------------------------------------------------------- |
|
||||||
| `_colors.scss` | Color palette and semantic colors (`success`, `warning`, `error`, `info`) |
|
| `_colors.scss` | Color palette and semantic colors (`success`, `warning`, `error`, `info`) |
|
||||||
| `_spacing.scss` | Base spacing scale, border radius, and border width |
|
| `_spacing.scss` | Base spacing scale, border radius, and border width |
|
||||||
| `_typography.scss` | Font families, sizes, and weights |
|
| `_typography.scss` | Font families, sizes, and weights |
|
||||||
|
|
||||||
**Rules:**
|
**Rules:**
|
||||||
|
|
||||||
- Never hardcode colors, spacing, or radii in component styles when a token exists.
|
- Never hardcode colors, spacing, or radii in component styles when a token exists.
|
||||||
- Never override tokens locally in component scope unless explicitly supported.
|
- Never override tokens locally in component scope unless explicitly supported.
|
||||||
- All global token changes must go through the core styling system.
|
- All global token changes must go through the core styling system.
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
|
Requires **Node.js >= 22.12.0**.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install @unkn0wndo3s/nova-design-system
|
npm install @unkn0wndo3s/nova-design-system
|
||||||
```
|
```
|
||||||
@@ -87,12 +103,33 @@ import { Button } from '@unkn0wndo3s/nova-design-system';
|
|||||||
|
|
||||||
```astro
|
```astro
|
||||||
---
|
---
|
||||||
import { Notifications } from '@unkn0wndo3s/nova-design-system';
|
import { Notification } from '@unkn0wndo3s/nova-design-system';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Notifications type="warning">
|
<Notification type="warning">
|
||||||
This is a warning message.
|
This is a warning message.
|
||||||
</Notifications>
|
</Notification>
|
||||||
|
```
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
import { Modal } from '@unkn0wndo3s/nova-design-system';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Modal>
|
||||||
|
This is a modal dialog.
|
||||||
|
</Modal>
|
||||||
|
```
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
import { Breadcrumb, BreadcrumbItem } from '@unkn0wndo3s/nova-design-system';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
||||||
|
<BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
|
||||||
|
</Breadcrumb>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Development
|
## Development
|
||||||
@@ -119,23 +156,35 @@ npm run dev
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run build # Build the project
|
npm run build # Build the project
|
||||||
npm run check # Type checking
|
npm run preview # Preview the production build
|
||||||
npm run lint # Lint the codebase
|
|
||||||
npm run format # Format code
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Project Structure
|
### Project Structure
|
||||||
|
|
||||||
```
|
```text
|
||||||
src/
|
src/
|
||||||
├── components/ # Astro components
|
├── components/ # Astro components
|
||||||
|
│ ├── Avatar/
|
||||||
|
│ ├── Badge/
|
||||||
|
│ ├── Breadcrumb/
|
||||||
│ ├── Button/
|
│ ├── Button/
|
||||||
│ ├── Icons/
|
│ ├── Card/
|
||||||
|
│ ├── Checkbox/
|
||||||
│ ├── Link/
|
│ ├── Link/
|
||||||
│ ├── ListItem/
|
│ ├── ListItem/
|
||||||
|
│ ├── LoadingBar/
|
||||||
|
│ ├── Modal/
|
||||||
|
│ ├── Navbar/
|
||||||
│ ├── Notifications/
|
│ ├── Notifications/
|
||||||
|
│ ├── numericStepper/
|
||||||
|
│ ├── pagination/
|
||||||
|
│ ├── Radio/
|
||||||
|
│ ├── Select/
|
||||||
|
│ ├── Sidebar/
|
||||||
│ ├── Tabs/
|
│ ├── Tabs/
|
||||||
|
│ ├── textField/
|
||||||
│ ├── Toggle/
|
│ ├── Toggle/
|
||||||
|
│ ├── Tooltip/
|
||||||
│ └── index.ts
|
│ └── index.ts
|
||||||
├── layouts/ # Astro layouts
|
├── layouts/ # Astro layouts
|
||||||
├── pages/ # Documentation pages
|
├── pages/ # Documentation pages
|
||||||
@@ -152,7 +201,7 @@ src/
|
|||||||
|
|
||||||
Contributions are welcome. To report a bug, suggest a feature, or open a Pull Request, follow the repository contribution rules and templates.
|
Contributions are welcome. To report a bug, suggest a feature, or open a Pull Request, follow the repository contribution rules and templates.
|
||||||
|
|
||||||
**Icon Contribution Policy:** By contributing a custom icon to NDS, you agree that it may be used within the design system under the repository license and contribution policy.
|
NDS no longer maintains a custom set of icon components — icons are sourced from the **[Lucide](https://lucide.dev/)** icon set via `@lucide/astro`. If a needed icon isn't in Lucide, open an issue to discuss it before adding any new icon dependency.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,26 @@
|
|||||||
{
|
{
|
||||||
"name": "@unkn0wndo3s/nova-design-system",
|
"name": "@unkn0wndo3s/nova-design-system",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.02.0",
|
"version": "1.2.1",
|
||||||
"main": "./src/index.ts",
|
|
||||||
"description": "Nova Design System — Astro component library",
|
"description": "Nova Design System — Astro component library",
|
||||||
|
"license": "LICENSE.md",
|
||||||
|
"author": "Unkn0wn",
|
||||||
|
"main": "./src/index.ts",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.novaprojects.dev/unkn0wn/nova-design-system.git"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://git.novaprojects.dev/unkn0wn/nova-design-system/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://git.novaprojects.dev/unkn0wn/nova-design-system#readme",
|
||||||
|
"keywords": [
|
||||||
|
"astro",
|
||||||
|
"astro-components",
|
||||||
|
"design-system",
|
||||||
|
"ui-library",
|
||||||
|
"nova"
|
||||||
|
],
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=22.12.0"
|
"node": ">=22.12.0"
|
||||||
},
|
},
|
||||||
@@ -12,7 +29,9 @@
|
|||||||
"./styles": "./src/styles/index.scss"
|
"./styles": "./src/styles/index.scss"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"src"
|
"src",
|
||||||
|
"LICENSE.md",
|
||||||
|
"README.md"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
@@ -21,9 +40,13 @@
|
|||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"astro": "^6.3.8"
|
"@lucide/astro": "^1.21.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"astro": "^7.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"astro": "^7.0.0",
|
||||||
"sass": "^1.99.0"
|
"sass": "^1.99.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
@use "../../styles/tokens/typography" as *;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: var(--nds-radius-full);
|
||||||
|
overflow: hidden;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background-color: var(--nds-primary-soft);
|
||||||
|
box-shadow: inset 0 0 0 1px var(--nds-border);
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include text-label;
|
||||||
|
color: var(--nds-primary);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
&__fallback {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: var(--nds-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
import { User } from '@lucide/astro';
|
||||||
|
export interface Props {
|
||||||
|
type: 'photo' | 'initials';
|
||||||
|
name: string;
|
||||||
|
image?: string;
|
||||||
|
}
|
||||||
|
const { type, name, image } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class={`avatar`}>
|
||||||
|
{type === 'photo' && image ? (
|
||||||
|
<div class="avatar__content avatar__content--photo">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={name}
|
||||||
|
class="avatar__content"
|
||||||
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
||||||
|
/>
|
||||||
|
<span class="avatar__fallback" style="display:none;">
|
||||||
|
<User size={24}/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span class="avatar__content">{name.split(' ').map(word => word[0]).join('').toUpperCase()}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use './_avatar.scss';
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
@use "../../styles/tokens/typography" as *;
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--nds-spacing-2xs);
|
||||||
|
padding: 3px var(--nds-spacing-xs);
|
||||||
|
border-radius: var(--nds-radius-full);
|
||||||
|
@include text-sm;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
width: fit-content;
|
||||||
|
white-space: nowrap;
|
||||||
|
&__primary {
|
||||||
|
--c: var(--nds-primary);
|
||||||
|
--on: var(--nds-on-primary);
|
||||||
|
--soft: var(--nds-primary-soft);
|
||||||
|
}
|
||||||
|
&__neutral {
|
||||||
|
--c: var(--nds-neutral);
|
||||||
|
--on: var(--nds-surface);
|
||||||
|
--soft: color-mix(in srgb, var(--nds-neutral) 16%, transparent);
|
||||||
|
}
|
||||||
|
&__success {
|
||||||
|
--c: var(--nds-success-medium);
|
||||||
|
--on: #fff;
|
||||||
|
--soft: var(--nds-success-low);
|
||||||
|
}
|
||||||
|
&__warning {
|
||||||
|
--c: var(--nds-warning-medium);
|
||||||
|
--on: #fff;
|
||||||
|
--soft: var(--nds-warning-low);
|
||||||
|
}
|
||||||
|
&__error {
|
||||||
|
--c: var(--nds-error-medium);
|
||||||
|
--on: #fff;
|
||||||
|
--soft: var(--nds-error-low);
|
||||||
|
}
|
||||||
|
&__info {
|
||||||
|
--c: var(--nds-info-medium);
|
||||||
|
--on: #fff;
|
||||||
|
--soft: var(--nds-info-low);
|
||||||
|
}
|
||||||
|
&--soft {
|
||||||
|
background-color: var(--soft);
|
||||||
|
color: var(--c);
|
||||||
|
}
|
||||||
|
&--solid {
|
||||||
|
background-color: var(--c);
|
||||||
|
color: var(--on);
|
||||||
|
}
|
||||||
|
&__dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: var(--nds-radius-full);
|
||||||
|
background-color: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
type?: "primary" | "neutral" | "success" | "warning" | "error" | "info";
|
||||||
|
variant?: "soft" | "solid";
|
||||||
|
}
|
||||||
|
const { type = "primary", variant = "soft" } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<span class={`badge badge__${type} badge--${variant}`}>
|
||||||
|
<slot />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "./_badge.scss";
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
@use "../../styles/tokens/typography" as *;
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--nds-spacing-xs);
|
||||||
|
@include text-base;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--nds-neutral);
|
||||||
|
transition: color 120ms ease;
|
||||||
|
&:hover {
|
||||||
|
color: var(--nds-text);
|
||||||
|
}
|
||||||
|
&:not(:first-child)::before {
|
||||||
|
content: "/";
|
||||||
|
color: var(--nds-disabled);
|
||||||
|
margin-right: var(--nds-spacing-xs);
|
||||||
|
}
|
||||||
|
&--current {
|
||||||
|
color: var(--nds-text);
|
||||||
|
font-weight: 600;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
---
|
||||||
|
export interface Props {}
|
||||||
|
---
|
||||||
|
|
||||||
|
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||||||
|
<slot />
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "./_breadcrumb.scss";
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
href?: string;
|
||||||
|
current?: boolean;
|
||||||
|
}
|
||||||
|
const { href = "#", current = false } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
class={`breadcrumb__item ${current ? "breadcrumb__item--current" : ""}`}
|
||||||
|
aria-current={current ? "page" : undefined}
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "./_breadcrumb.scss";
|
||||||
|
</style>
|
||||||
@@ -1,37 +1,97 @@
|
|||||||
@use '../../styles/tokens/typography' as *;
|
@use "../../styles/tokens/typography" as *;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--nds-spacing-xs);
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
padding: var(--nds-spacing-sm) var(--nds-spacing-md);
|
border: var(--nds-border-width-thin) solid transparent;
|
||||||
border-radius: var(--nds-radius-sm);
|
border-radius: var(--nds-radius-md);
|
||||||
@include text-base;
|
@include text-label;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&__primary {
|
user-select: none;
|
||||||
background-color: var(--nds-primary);
|
transition:
|
||||||
color: var(--nds-text);
|
background-color 140ms ease,
|
||||||
&:hover:not(.button--disabled) {
|
border-color 140ms ease,
|
||||||
background-color: var(--nds-secondary);
|
color 140ms ease,
|
||||||
|
box-shadow 140ms ease,
|
||||||
|
transform 80ms ease;
|
||||||
|
&:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 3px var(--nds-ring);
|
||||||
}
|
}
|
||||||
&:active:not(.button--disabled) {
|
&:active:not(.button--disabled) {
|
||||||
background-color: var(--nds-accent);
|
transform: translateY(0.5px);
|
||||||
color: var(--nds-background);
|
}
|
||||||
|
&--sm {
|
||||||
|
height: 30px;
|
||||||
|
padding: 0 var(--nds-spacing-sm);
|
||||||
|
}
|
||||||
|
&--md {
|
||||||
|
height: 38px;
|
||||||
|
padding: 0 var(--nds-spacing-md);
|
||||||
|
}
|
||||||
|
&--lg {
|
||||||
|
height: 46px;
|
||||||
|
padding: 0 var(--nds-spacing-lg);
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
&--icon {
|
||||||
|
padding: 0;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
}
|
||||||
|
&--icon.button--sm {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
&--icon.button--md {
|
||||||
|
width: 38px;
|
||||||
|
}
|
||||||
|
&--icon.button--lg {
|
||||||
|
width: 46px;
|
||||||
|
}
|
||||||
|
&__primary {
|
||||||
|
background-color: var(--nds-primary);
|
||||||
|
color: var(--nds-on-primary);
|
||||||
|
border-color: var(--nds-primary);
|
||||||
|
&:hover:not(.button--disabled) {
|
||||||
|
background-color: color-mix(in srgb, var(--nds-primary) 88%, #000);
|
||||||
|
border-color: color-mix(in srgb, var(--nds-primary) 88%, #000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__secondary {
|
&__secondary {
|
||||||
border: var(--nds-border-width-medium) solid;
|
background-color: transparent;
|
||||||
border-color: var(--nds-primary);
|
|
||||||
color: var(--nds-primary);
|
color: var(--nds-primary);
|
||||||
|
border-color: var(--nds-border-strong);
|
||||||
&:hover:not(.button--disabled) {
|
&:hover:not(.button--disabled) {
|
||||||
border-color: var(--nds-secondary);
|
border-color: var(--nds-primary);
|
||||||
|
background-color: var(--nds-primary-soft);
|
||||||
}
|
}
|
||||||
&:active:not(.button--disabled) {
|
}
|
||||||
border-color: var(--nds-accent);
|
&__ghost {
|
||||||
color: var(--nds-accent);
|
background-color: transparent;
|
||||||
|
color: var(--nds-text);
|
||||||
|
border-color: transparent;
|
||||||
|
&:hover:not(.button--disabled) {
|
||||||
|
background-color: var(--nds-surface-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__danger {
|
||||||
|
background-color: var(--nds-error-medium);
|
||||||
|
color: #fff;
|
||||||
|
border-color: var(--nds-error-medium);
|
||||||
|
&:hover:not(.button--disabled) {
|
||||||
|
background-color: color-mix(in srgb, var(--nds-error-medium) 88%, #000);
|
||||||
|
border-color: color-mix(in srgb, var(--nds-error-medium) 88%, #000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&--disabled {
|
&--disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
background-color: var(--nds-disabled);
|
background-color: var(--nds-disabled);
|
||||||
color: var(--nds-neutral);
|
color: var(--nds-neutral);
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,15 +1,47 @@
|
|||||||
---
|
---
|
||||||
export interface Props {
|
export interface Props {
|
||||||
type: 'primary' | 'secondary';
|
type?: "primary" | "secondary" | "ghost" | "danger";
|
||||||
|
size?: "sm" | "md" | "lg";
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
icon?: boolean;
|
||||||
|
href?: string;
|
||||||
|
htmlType?: "button" | "submit" | "reset";
|
||||||
}
|
}
|
||||||
const { type, disabled = false } = Astro.props;
|
const {
|
||||||
|
type = "primary",
|
||||||
|
size = "md",
|
||||||
|
disabled = false,
|
||||||
|
icon = false,
|
||||||
|
href,
|
||||||
|
htmlType = "button",
|
||||||
|
...rest
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
const classes = [
|
||||||
|
"button",
|
||||||
|
`button__${type}`,
|
||||||
|
`button--${size}`,
|
||||||
|
icon ? "button--icon" : "",
|
||||||
|
disabled ? "button--disabled" : "",
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(" ");
|
||||||
|
|
||||||
|
const Tag = href ? "a" : "button";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class={`button button__${type} ${disabled ? 'button--disabled' : ''}`}>
|
<Tag
|
||||||
<slot/>
|
class={classes}
|
||||||
</div>
|
href={href}
|
||||||
|
type={href ? undefined : htmlType}
|
||||||
|
aria-disabled={disabled ? "true" : undefined}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
<slot name="icon-left" />
|
||||||
|
<slot />
|
||||||
|
<slot name="icon-right" />
|
||||||
|
</Tag>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@use './_button.scss';
|
@use "./_button.scss";
|
||||||
</style>
|
</style>
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
@use "../../styles/tokens/typography" as *;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: var(--nds-surface);
|
||||||
|
border: var(--nds-border-width-thin) solid var(--nds-border);
|
||||||
|
border-radius: var(--nds-radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--nds-shadow-sm);
|
||||||
|
width: fit-content;
|
||||||
|
transition:
|
||||||
|
box-shadow 160ms ease,
|
||||||
|
border-color 160ms ease;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--nds-shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__cover {
|
||||||
|
height: 150px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
&__body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--nds-spacing-xs);
|
||||||
|
padding: var(--nds-spacing-md);
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
@include text-xl;
|
||||||
|
color: var(--nds-text);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
&__subtitle {
|
||||||
|
@include text-base;
|
||||||
|
color: var(--nds-neutral);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
&__content {
|
||||||
|
@include text-base;
|
||||||
|
color: var(--nds-text);
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__footer {
|
||||||
|
margin-top: var(--nds-spacing-2xs);
|
||||||
|
display: flex;
|
||||||
|
gap: var(--nds-spacing-xs);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
title?: string;
|
||||||
|
subtitle?: string;
|
||||||
|
cover?: string;
|
||||||
|
}
|
||||||
|
const { title, subtitle, cover } = Astro.props;
|
||||||
|
const hasFooter = Astro.slots.has("footer");
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
{
|
||||||
|
cover && (
|
||||||
|
<div class="card__cover" style={`background-image: url(${cover})`} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<div class="card__body">
|
||||||
|
{title && <p class="card__title">{title}</p>}
|
||||||
|
{subtitle && <p class="card__subtitle">{subtitle}</p>}
|
||||||
|
<div class="card__content"><slot /></div>
|
||||||
|
{
|
||||||
|
hasFooter && (
|
||||||
|
<div class="card__footer">
|
||||||
|
<slot name="footer" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "./_card.scss";
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
@use "../../styles/tokens/typography" as *;
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--nds-spacing-xs);
|
||||||
|
cursor: pointer;
|
||||||
|
@include text-base;
|
||||||
|
color: var(--nds-text);
|
||||||
|
&__input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
&__box {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: var(--nds-border-width-medium) solid var(--nds-border-strong);
|
||||||
|
border-radius: var(--nds-radius-sm);
|
||||||
|
background-color: var(--nds-surface);
|
||||||
|
color: var(--nds-on-primary);
|
||||||
|
transition: all 130ms ease;
|
||||||
|
svg {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.6);
|
||||||
|
transition: all 130ms ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__input:checked + &__box {
|
||||||
|
background-color: var(--nds-primary);
|
||||||
|
border-color: var(--nds-primary);
|
||||||
|
svg {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__input:focus-visible + &__box {
|
||||||
|
box-shadow: 0 0 0 3px var(--nds-ring);
|
||||||
|
}
|
||||||
|
&--disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
id: string;
|
||||||
|
name?: string;
|
||||||
|
checked?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
const { id, name, checked = false, disabled = false } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<label class={`checkbox ${disabled ? "checkbox--disabled" : ""}`} for={id}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id={id}
|
||||||
|
name={name}
|
||||||
|
checked={checked}
|
||||||
|
disabled={disabled}
|
||||||
|
class="checkbox__input"
|
||||||
|
/>
|
||||||
|
<span class="checkbox__box" aria-hidden="true">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="checkbox__label"><slot /></span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "./_checkbox.scss";
|
||||||
|
</style>
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
---
|
|
||||||
import arrow16down from './svgs/arrow2-16-down.svg?raw';
|
|
||||||
import arrow16left from './svgs/arrow2-16-left.svg?raw';
|
|
||||||
import arrow16right from './svgs/arrow2-16-right.svg?raw';
|
|
||||||
import arrow16up from './svgs/arrow2-16-up.svg?raw';
|
|
||||||
import arrow24down from './svgs/arrow2-24-down.svg?raw';
|
|
||||||
import arrow24left from './svgs/arrow2-24-left.svg?raw';
|
|
||||||
import arrow24right from './svgs/arrow2-24-right.svg?raw';
|
|
||||||
import arrow24up from './svgs/arrow2-24-up.svg?raw';
|
|
||||||
import arrow32down from './svgs/arrow2-32-down.svg?raw';
|
|
||||||
import arrow32left from './svgs/arrow2-32-left.svg?raw';
|
|
||||||
import arrow32right from './svgs/arrow2-32-right.svg?raw';
|
|
||||||
import arrow32up from './svgs/arrow2-32-up.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
orientation: 'up' | 'down' | 'left' | 'right';
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, orientation = 'down', label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16 && orientation === 'down') raw = arrow16down;
|
|
||||||
else if (size === 16 && orientation === 'left') raw = arrow16left;
|
|
||||||
else if (size === 16 && orientation === 'right') raw = arrow16right;
|
|
||||||
else if (size === 16 && orientation === 'up') raw = arrow16up;
|
|
||||||
else if (size === 24 && orientation === 'down') raw = arrow24down;
|
|
||||||
else if (size === 24 && orientation === 'left') raw = arrow24left;
|
|
||||||
else if (size === 24 && orientation === 'right') raw = arrow24right;
|
|
||||||
else if (size === 24 && orientation === 'up') raw = arrow24up;
|
|
||||||
else if (size === 32 && orientation === 'down') raw = arrow32down;
|
|
||||||
else if (size === 32 && orientation === 'left') raw = arrow32left;
|
|
||||||
else if (size === 32 && orientation === 'right') raw = arrow32right;
|
|
||||||
else if (size === 32 && orientation === 'up') raw = arrow32up;
|
|
||||||
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size and orientation.
|
|
||||||
|
|
||||||
const classes = ['nds-icon-arrow2', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.44167 9.69166C8.32448 9.8087 8.16563 9.87444 8 9.87444C7.83438 9.87444 7.67553 9.8087 7.55834 9.69166L5.20084 7.33499C5.08365 7.21775 5.01783 7.05875 5.01787 6.89297C5.01791 6.7272 5.0838 6.56823 5.20105 6.45104C5.31829 6.33384 5.47729 6.26803 5.64307 6.26807C5.80884 6.26811 5.96781 6.334 6.085 6.45124L8 8.36624L9.915 6.45124C10.0328 6.33734 10.1907 6.27427 10.3545 6.27561C10.5184 6.27696 10.6752 6.34262 10.7911 6.45844C10.9071 6.57427 10.9729 6.731 10.9744 6.89487C10.9759 7.05874 10.913 7.21665 10.7992 7.33458L8.44209 9.69208L8.44167 9.69166Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 731 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.30833 7.55834C6.19129 7.67553 6.12555 7.83439 6.12555 8.00001C6.12555 8.16564 6.19129 8.32449 6.30833 8.44168L8.665 10.7992C8.72305 10.8572 8.79197 10.9032 8.86781 10.9346C8.94366 10.966 9.02494 10.9822 9.10702 10.9821C9.1891 10.9821 9.27038 10.9659 9.34621 10.9345C9.42204 10.9031 9.49093 10.857 9.54896 10.799C9.60699 10.7409 9.65301 10.672 9.6844 10.5962C9.7158 10.5203 9.73195 10.439 9.73193 10.3569C9.73191 10.2749 9.71572 10.1936 9.68429 10.1178C9.65286 10.0419 9.6068 9.97304 9.54875 9.91501L7.63417 8.00001L9.54917 6.08501C9.60889 6.02738 9.65653 5.95844 9.68932 5.8822C9.72211 5.80597 9.73939 5.72396 9.74015 5.64098C9.74091 5.55799 9.72514 5.47568 9.69375 5.39886C9.66236 5.32204 9.61599 5.25223 9.55733 5.19352C9.49868 5.13481 9.42892 5.08837 9.35212 5.05691C9.27532 5.02545 9.19303 5.00959 9.11005 5.01027C9.02706 5.01096 8.94504 5.02816 8.86877 5.06088C8.7925 5.0936 8.72352 5.14118 8.66583 5.20084L6.30833 7.55834Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69167 7.55834C9.80871 7.67553 9.87445 7.83439 9.87445 8.00001C9.87445 8.16564 9.80871 8.32449 9.69167 8.44168L7.335 10.7992C7.27695 10.8572 7.20803 10.9032 7.13219 10.9346C7.05634 10.966 6.97506 10.9822 6.89298 10.9821C6.8109 10.9821 6.72962 10.9659 6.65379 10.9345C6.57796 10.9031 6.50907 10.857 6.45104 10.799C6.39301 10.7409 6.34699 10.672 6.3156 10.5962C6.2842 10.5203 6.26805 10.439 6.26807 10.3569C6.26809 10.2749 6.28428 10.1936 6.31571 10.1178C6.34714 10.0419 6.3932 9.97304 6.45125 9.91501L8.36583 8.00001L6.45083 6.08501C6.39111 6.02738 6.34347 5.95844 6.31068 5.8822C6.27789 5.80597 6.26061 5.72396 6.25985 5.64098C6.25909 5.55799 6.27486 5.47568 6.30625 5.39886C6.33764 5.32204 6.38401 5.25223 6.44267 5.19352C6.50132 5.13481 6.57108 5.08837 6.64788 5.05691C6.72468 5.02545 6.80697 5.00959 6.88995 5.01027C6.97294 5.01096 7.05496 5.02816 7.13123 5.06088C7.2075 5.0936 7.27648 5.14118 7.33417 5.20084L9.69167 7.55834Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.55833 6.30833C7.67552 6.19129 7.83437 6.12555 8 6.12555C8.16562 6.12555 8.32447 6.19129 8.44166 6.30833L10.7992 8.665C10.8572 8.72305 10.9032 8.79197 10.9346 8.86781C10.966 8.94366 10.9822 9.02494 10.9821 9.10702C10.9821 9.1891 10.9659 9.27038 10.9345 9.34621C10.9031 9.42204 10.857 9.49093 10.799 9.54896C10.7409 9.60699 10.672 9.65301 10.5961 9.6844C10.5203 9.7158 10.439 9.73195 10.3569 9.73193C10.2748 9.73191 10.1936 9.71572 10.1177 9.68429C10.0419 9.65286 9.97302 9.6068 9.915 9.54875L8 7.63417L6.085 9.54917C6.02737 9.60889 5.95843 9.65653 5.88219 9.68932C5.80595 9.72211 5.72395 9.73939 5.64096 9.74015C5.55798 9.74091 5.47567 9.72514 5.39884 9.69375C5.32202 9.66236 5.25222 9.61599 5.19351 9.55733C5.1348 9.49868 5.08835 9.42892 5.05689 9.35212C5.02543 9.27532 5.00958 9.19303 5.01026 9.11005C5.01094 9.02706 5.02814 8.94504 5.06086 8.86877C5.09358 8.7925 5.14116 8.72352 5.20083 8.66583L7.55833 6.30833Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.795 15.045C12.5841 15.2557 12.2981 15.374 12 15.374C11.7019 15.374 11.4159 15.2557 11.205 15.045L6.9615 10.803C6.75056 10.592 6.63209 10.3058 6.63216 10.0074C6.63223 9.70897 6.75083 9.42283 6.96188 9.21188C7.17292 9.00094 7.45912 8.88247 7.75752 8.88254C8.05591 8.88261 8.34205 9.00121 8.553 9.21226L12 12.6593L15.447 9.21226C15.6591 9.00723 15.9432 8.8937 16.2382 8.89612C16.5332 8.89855 16.8154 9.01673 17.0241 9.22521C17.2327 9.4337 17.3512 9.71581 17.3539 10.0108C17.3566 10.3058 17.2433 10.59 17.0385 10.8023L12.7958 15.0458L12.795 15.045Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 727 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.95499 11.205C8.74431 11.4159 8.62598 11.7019 8.62598 12C8.62598 12.2981 8.74431 12.5841 8.95499 12.795L13.197 17.0385C13.3015 17.143 13.4255 17.2258 13.5621 17.2823C13.6986 17.3388 13.8449 17.3679 13.9926 17.3678C14.1404 17.3678 14.2867 17.3387 14.4232 17.2821C14.5597 17.2255 14.6837 17.1426 14.7881 17.0381C14.8926 16.9336 14.9754 16.8096 15.0319 16.6731C15.0884 16.5365 15.1175 16.3902 15.1175 16.2425C15.1174 16.0947 15.0883 15.9484 15.0317 15.812C14.9751 15.6755 14.8922 15.5515 14.7877 15.447L11.3415 12L14.7885 8.553C14.896 8.44927 14.9817 8.32518 15.0408 8.18795C15.0998 8.05072 15.1309 7.90312 15.1323 7.75374C15.1336 7.60437 15.1052 7.45621 15.0487 7.31793C14.9922 7.17964 14.9088 7.054 14.8032 6.94832C14.6976 6.84264 14.572 6.75905 14.4338 6.70242C14.2956 6.64578 14.1474 6.61725 13.9981 6.61848C13.8487 6.6197 13.7011 6.65067 13.5638 6.70956C13.4265 6.76846 13.3023 6.8541 13.1985 6.9615L8.95499 11.205Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.045 11.205C15.2557 11.4159 15.374 11.7019 15.374 12C15.374 12.2981 15.2557 12.5841 15.045 12.795L10.803 17.0385C10.6985 17.143 10.5745 17.2258 10.4379 17.2823C10.3014 17.3388 10.1551 17.3679 10.0074 17.3678C9.85962 17.3678 9.71333 17.3387 9.57684 17.2821C9.44035 17.2255 9.31634 17.1426 9.21189 17.0381C9.10744 16.9336 9.02459 16.8096 8.96808 16.6731C8.91158 16.5365 8.88251 16.3902 8.88254 16.2425C8.88258 16.0947 8.91171 15.9484 8.96829 15.812C9.02486 15.6755 9.10776 15.5515 9.21226 15.447L12.6585 12L9.21151 8.553C9.10402 8.44927 9.01825 8.32518 8.95923 8.18795C8.90021 8.05072 8.8691 7.90312 8.86774 7.75374C8.86637 7.60437 8.89476 7.45621 8.95126 7.31793C9.00776 7.17964 9.09124 7.054 9.19682 6.94832C9.3024 6.84264 9.42797 6.75905 9.5662 6.70242C9.70443 6.64578 9.85255 6.61725 10.0019 6.61848C10.1513 6.6197 10.2989 6.65067 10.4362 6.70956C10.5735 6.76846 10.6977 6.8541 10.8015 6.9615L15.045 11.205Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.205 8.95499C11.4159 8.74431 11.7019 8.62598 12 8.62598C12.2981 8.62598 12.5841 8.74431 12.795 8.95499L17.0385 13.197C17.143 13.3015 17.2258 13.4255 17.2823 13.5621C17.3388 13.6986 17.3679 13.8449 17.3678 13.9926C17.3678 14.1404 17.3387 14.2867 17.2821 14.4232C17.2255 14.5597 17.1426 14.6837 17.0381 14.7881C16.9336 14.8926 16.8096 14.9754 16.6731 15.0319C16.5365 15.0884 16.3902 15.1175 16.2425 15.1175C16.0947 15.1174 15.9484 15.0883 15.812 15.0317C15.6755 14.9751 15.5515 14.8922 15.447 14.7877L12 11.3415L8.553 14.7885C8.44927 14.896 8.32518 14.9817 8.18795 15.0408C8.05072 15.0998 7.90312 15.1309 7.75374 15.1323C7.60437 15.1336 7.45621 15.1052 7.31793 15.0487C7.17964 14.9922 7.054 14.9088 6.94832 14.8032C6.84264 14.6976 6.75905 14.572 6.70242 14.4338C6.64578 14.2956 6.61725 14.1474 6.61848 13.9981C6.6197 13.8487 6.65067 13.7011 6.70956 13.5638C6.76846 13.4265 6.8541 13.3023 6.9615 13.1985L11.205 8.95499Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1483 20.3984C16.8436 20.7027 16.4306 20.8736 16 20.8736C15.5694 20.8736 15.1564 20.7027 14.8517 20.3984L8.72217 14.271C8.41747 13.9662 8.24634 13.5528 8.24644 13.1218C8.24655 12.6908 8.41786 12.2774 8.72271 11.9727C9.02755 11.668 9.44095 11.4969 9.87197 11.497C10.303 11.4971 10.7163 11.6684 11.021 11.9733L16 16.9523L20.979 11.9733C21.2853 11.6771 21.6957 11.5131 22.1218 11.5166C22.5479 11.5201 22.9555 11.6908 23.257 11.992C23.5584 12.2931 23.7295 12.7006 23.7334 13.1267C23.7373 13.5528 23.5737 13.9633 23.2778 14.2699L17.1494 20.3994L17.1483 20.3984Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 738 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6016 14.8517C11.2973 15.1563 11.1264 15.5694 11.1264 16C11.1264 16.4306 11.2973 16.8436 11.6016 17.1483L17.729 23.2778C17.8799 23.4287 18.0591 23.5484 18.2563 23.63C18.4535 23.7116 18.6648 23.7536 18.8782 23.7535C19.0917 23.7535 19.303 23.7114 19.5001 23.6297C19.6973 23.548 19.8764 23.4282 20.0273 23.2773C20.1781 23.1263 20.2978 22.9472 20.3794 22.75C20.4611 22.5528 20.503 22.3414 20.503 22.128C20.5029 21.9146 20.4609 21.7033 20.3791 21.5061C20.2974 21.309 20.1777 21.1299 20.0267 20.979L15.0488 16L20.0278 11.021C20.1831 10.8712 20.307 10.6919 20.3922 10.4937C20.4775 10.2955 20.5224 10.0823 20.5244 9.86651C20.5264 9.65074 20.4853 9.43674 20.4037 9.237C20.3221 9.03725 20.2015 8.85576 20.049 8.70312C19.8965 8.55047 19.7152 8.42972 19.5155 8.34792C19.3158 8.26612 19.1019 8.22491 18.8861 8.22668C18.6703 8.22845 18.4571 8.27318 18.2588 8.35825C18.0605 8.44332 17.8811 8.56703 17.7311 8.72216L11.6016 14.8517Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3984 14.8517C20.7027 15.1563 20.8736 15.5694 20.8736 16C20.8736 16.4306 20.7027 16.8436 20.3984 17.1483L14.271 23.2778C14.1201 23.4287 13.9409 23.5484 13.7437 23.63C13.5465 23.7116 13.3352 23.7536 13.1218 23.7535C12.9084 23.7535 12.697 23.7114 12.4999 23.6297C12.3027 23.548 12.1236 23.4282 11.9727 23.2773C11.8219 23.1263 11.7022 22.9472 11.6206 22.75C11.5389 22.5528 11.497 22.3414 11.497 22.128C11.4971 21.9146 11.5391 21.7033 11.6209 21.5061C11.7026 21.309 11.8223 21.1299 11.9733 20.979L16.9512 16L11.9722 11.021C11.8169 10.8712 11.693 10.6919 11.6078 10.4937C11.5225 10.2955 11.4776 10.0823 11.4756 9.86651C11.4736 9.65074 11.5147 9.43674 11.5963 9.237C11.6779 9.03725 11.7985 8.85576 11.951 8.70312C12.1035 8.55047 12.2848 8.42972 12.4845 8.34792C12.6842 8.26612 12.8981 8.22491 13.1139 8.22668C13.3297 8.22845 13.5429 8.27318 13.7412 8.35825C13.9395 8.44332 14.1189 8.56703 14.2689 8.72216L20.3984 14.8517Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8517 11.6017C15.1563 11.2974 15.5694 11.1264 16 11.1264C16.4306 11.1264 16.8436 11.2974 17.1483 11.6017L23.2778 17.729C23.4287 17.8799 23.5484 18.0591 23.63 18.2563C23.7116 18.4535 23.7536 18.6648 23.7535 18.8783C23.7535 19.0917 23.7114 19.303 23.6297 19.5001C23.548 19.6973 23.4282 19.8764 23.2773 20.0273C23.1263 20.1782 22.9472 20.2978 22.75 20.3795C22.5528 20.4611 22.3414 20.5031 22.128 20.503C21.9146 20.503 21.7033 20.4609 21.5061 20.3792C21.309 20.2974 21.1299 20.1777 20.979 20.0268L16 15.0488L11.021 20.0278C10.8712 20.1831 10.6919 20.307 10.4937 20.3922C10.2955 20.4775 10.0823 20.5224 9.86651 20.5244C9.65074 20.5264 9.43674 20.4854 9.237 20.4038C9.03725 20.3221 8.85576 20.2016 8.70312 20.0491C8.55047 19.8966 8.42972 19.7152 8.34792 19.5155C8.26612 19.3159 8.22491 19.1019 8.22668 18.8861C8.22845 18.6704 8.27318 18.4571 8.35825 18.2588C8.44332 18.0605 8.56703 17.8811 8.72216 17.7312L14.8517 11.6017Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import bin16 from './svgs/bin-16.svg?raw';
|
|
||||||
import bin24 from './svgs/bin-24.svg?raw';
|
|
||||||
import bin32 from './svgs/bin-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = bin16;
|
|
||||||
else if (size === 24) raw = bin24;
|
|
||||||
else if (size === 32) raw = bin32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-bin', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M5.22223 13C4.91667 13 4.65519 12.8913 4.43778 12.6739C4.22037 12.4565 4.11149 12.1948 4.11111 11.8889V4.66667C3.95371 4.66667 3.82186 4.61333 3.71556 4.50667C3.60926 4.4 3.55593 4.26815 3.55556 4.11111C3.55519 3.95407 3.60852 3.82222 3.71556 3.71556C3.8226 3.60889 3.95445 3.55556 4.11111 3.55556H6.33334C6.33334 3.39815 6.38667 3.2663 6.49334 3.16C6.6 3.0537 6.73186 3.00037 6.88889 3H9.11111C9.26852 3 9.40056 3.05333 9.50723 3.16C9.61389 3.26667 9.66704 3.39852 9.66667 3.55556H11.8889C12.0463 3.55556 12.1783 3.60889 12.285 3.71556C12.3917 3.82222 12.4448 3.95407 12.4444 4.11111C12.4441 4.26815 12.3907 4.40018 12.2844 4.50722C12.1782 4.61426 12.0463 4.66741 11.8889 4.66667V11.8889C11.8889 12.1944 11.7802 12.4561 11.5628 12.6739C11.3454 12.8917 11.0837 13.0004 10.7778 13H5.22223ZM7.285 10.6178C7.3913 10.5119 7.44445 10.38 7.44445 10.2222V6.33333C7.44445 6.17593 7.39111 6.04407 7.28445 5.93778C7.17778 5.83148 7.04593 5.77815 6.88889 5.77778C6.73186 5.77741 6.6 5.83074 6.49334 5.93778C6.38667 6.04481 6.33334 6.17667 6.33334 6.33333V10.2222C6.33334 10.3796 6.38667 10.5117 6.49334 10.6183C6.6 10.725 6.73186 10.7781 6.88889 10.7778C7.04593 10.7774 7.17797 10.7241 7.285 10.6178ZM9.50723 10.6178C9.61352 10.5119 9.66667 10.38 9.66667 10.2222V6.33333C9.66667 6.17593 9.61334 6.04407 9.50667 5.93778C9.4 5.83148 9.26815 5.77815 9.11111 5.77778C8.95408 5.77741 8.82223 5.83074 8.71556 5.93778C8.60889 6.04481 8.55556 6.17667 8.55556 6.33333V10.2222C8.55556 10.3796 8.60889 10.5117 8.71556 10.6183C8.82223 10.725 8.95408 10.7781 9.11111 10.7778C9.26815 10.7774 9.40019 10.7241 9.50723 10.6178Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M7 21C6.45 21 5.97934 20.8043 5.588 20.413C5.19667 20.0217 5.00067 19.5507 5 19V6C4.71667 6 4.47934 5.904 4.288 5.712C4.09667 5.52 4.00067 5.28267 4 5C3.99934 4.71733 4.09534 4.48 4.288 4.288C4.48067 4.096 4.718 4 5 4H9C9 3.71667 9.096 3.47933 9.288 3.288C9.48 3.09667 9.71734 3.00067 10 3H14C14.2833 3 14.521 3.096 14.713 3.288C14.905 3.48 15.0007 3.71733 15 4H19C19.2833 4 19.521 4.096 19.713 4.288C19.905 4.48 20.0007 4.71733 20 5C19.9993 5.28267 19.9033 5.52033 19.712 5.713C19.5207 5.90567 19.2833 6.00133 19 6V19C19 19.55 18.8043 20.021 18.413 20.413C18.0217 20.805 17.5507 21.0007 17 21H7ZM10.713 16.712C10.9043 16.5213 11 16.284 11 16V9C11 8.71667 10.904 8.47933 10.712 8.288C10.52 8.09667 10.2827 8.00067 10 8C9.71734 7.99933 9.48 8.09533 9.288 8.288C9.096 8.48067 9 8.718 9 9V16C9 16.2833 9.096 16.521 9.288 16.713C9.48 16.905 9.71734 17.0007 10 17C10.2827 16.9993 10.5203 16.9033 10.713 16.712ZM14.713 16.712C14.9043 16.5213 15 16.284 15 16V9C15 8.71667 14.904 8.47933 14.712 8.288C14.52 8.09667 14.2827 8.00067 14 8C13.7173 7.99933 13.48 8.09533 13.288 8.288C13.096 8.48067 13 8.718 13 9V16C13 16.2833 13.096 16.521 13.288 16.713C13.48 16.905 13.7173 17.0007 14 17C14.2827 16.9993 14.5203 16.9033 14.713 16.712Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M8.77778 29C7.98334 29 7.30348 28.7174 6.73822 28.1521C6.17297 27.5868 5.88985 26.9065 5.88889 26.1111V7.33333C5.47963 7.33333 5.13682 7.19467 4.86045 6.91733C4.58408 6.64 4.44541 6.29718 4.44445 5.88889C4.44348 5.48059 4.58215 5.13778 4.86045 4.86044C5.13874 4.58311 5.48156 4.44444 5.88889 4.44444H11.6667C11.6667 4.03519 11.8053 3.69237 12.0827 3.416C12.36 3.13963 12.7028 3.00096 13.1111 3H18.8889C19.2981 3 19.6414 3.13867 19.9188 3.416C20.1961 3.69333 20.3343 4.03615 20.3333 4.44444H26.1111C26.5204 4.44444 26.8637 4.58311 27.141 4.86044C27.4183 5.13778 27.5565 5.48059 27.5556 5.88889C27.5546 6.29718 27.4159 6.64048 27.1396 6.91878C26.8632 7.19707 26.5204 7.33526 26.1111 7.33333V26.1111C26.1111 26.9056 25.8285 27.5859 25.2632 28.1521C24.698 28.7183 24.0176 29.001 23.2222 29H8.77778ZM14.141 22.8062C14.4174 22.5308 14.5556 22.188 14.5556 21.7778V11.6667C14.5556 11.2574 14.4169 10.9146 14.1396 10.6382C13.8622 10.3619 13.5194 10.2232 13.1111 10.2222C12.7028 10.2213 12.36 10.3599 12.0827 10.6382C11.8053 10.9165 11.6667 11.2593 11.6667 11.6667V21.7778C11.6667 22.187 11.8053 22.5303 12.0827 22.8077C12.36 23.085 12.7028 23.2232 13.1111 23.2222C13.5194 23.2213 13.8627 23.0826 14.141 22.8062ZM19.9188 22.8062C20.1951 22.5308 20.3333 22.188 20.3333 21.7778V11.6667C20.3333 11.2574 20.1947 10.9146 19.9173 10.6382C19.64 10.3619 19.2972 10.2232 18.8889 10.2222C18.4806 10.2213 18.1378 10.3599 17.8604 10.6382C17.5831 10.9165 17.4444 11.2593 17.4444 11.6667V21.7778C17.4444 22.187 17.5831 22.5303 17.8604 22.8077C18.1378 23.085 18.4806 23.2232 18.8889 23.2222C19.2972 23.2213 19.6405 23.0826 19.9188 22.8062Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import burger16 from './svgs/burger-16.svg?raw';
|
|
||||||
import burger24 from './svgs/burger-24.svg?raw';
|
|
||||||
import burger32 from './svgs/burger-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = burger16;
|
|
||||||
else if (size === 24) raw = burger24;
|
|
||||||
else if (size === 32) raw = burger32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-burger', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M2 4H14M2 8H14M2 12H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 215 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M3 6H21M3 12H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 233 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M4 8H28M4 16H28M4 24H28" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 233 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import calendar16 from './svgs/calendar-16.svg?raw';
|
|
||||||
import calendar24 from './svgs/calendar-24.svg?raw';
|
|
||||||
import calendar32 from './svgs/calendar-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = calendar16;
|
|
||||||
else if (size === 24) raw = calendar24;
|
|
||||||
else if (size === 32) raw = calendar32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-calendar', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 5.7 KiB |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import check16 from './svgs/check-16.svg?raw';
|
|
||||||
import check24 from './svgs/check-24.svg?raw';
|
|
||||||
import check32 from './svgs/check-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = check16;
|
|
||||||
else if (size === 24) raw = check24;
|
|
||||||
else if (size === 32) raw = check32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-check', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M6.41997 10.0451L11.9006 4.56449C12.03 4.43515 12.1809 4.37048 12.3533 4.37048C12.5258 4.37048 12.6767 4.43515 12.806 4.56449C12.9353 4.69383 13 4.84752 13 5.02558C13 5.20363 12.9353 5.35711 12.806 5.48602L6.87265 11.4355C6.74332 11.5649 6.59242 11.6295 6.41997 11.6295C6.24752 11.6295 6.09663 11.5649 5.96729 11.4355L3.18654 8.65478C3.05721 8.52544 2.99512 8.37196 3.0003 8.19434C3.00547 8.01671 3.07294 7.86302 3.20271 7.73325C3.33248 7.60348 3.48618 7.53881 3.6638 7.53924C3.84142 7.53967 3.9949 7.60434 4.12424 7.73325L6.41997 10.0451Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 678 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M9.15595 15.6813L19.0211 5.81607C19.2539 5.58326 19.5256 5.46686 19.836 5.46686C20.1464 5.46686 20.418 5.58326 20.6508 5.81607C20.8836 6.04888 21 6.32553 21 6.64602C21 6.96652 20.8836 7.24279 20.6508 7.47482L9.97077 18.1839C9.73797 18.4167 9.46636 18.5331 9.15595 18.5331C8.84554 18.5331 8.57393 18.4167 8.34113 18.1839L3.33578 13.1786C3.10297 12.9458 2.99122 12.6695 3.00054 12.3498C3.00985 12.0301 3.1313 11.7534 3.36488 11.5198C3.59846 11.2863 3.87512 11.1698 4.19484 11.1706C4.51456 11.1714 4.79082 11.2878 5.02363 11.5198L9.15595 15.6813Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 682 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.8919 21.3174L26.1416 7.06765C26.4779 6.73137 26.8702 6.56323 27.3186 6.56323C27.767 6.56323 28.1593 6.73137 28.4956 7.06765C28.8319 7.40392 29 7.80353 29 8.26647C29 8.72941 28.8319 9.12846 28.4956 9.46362L13.0689 24.9323C12.7326 25.2686 12.3403 25.4368 11.8919 25.4368C11.4436 25.4368 11.0512 25.2686 10.715 24.9323L3.48501 17.7024C3.14874 17.3661 2.98732 16.9671 3.00078 16.5052C3.01423 16.0434 3.18965 15.6438 3.52705 15.3064C3.86445 14.969 4.26406 14.8009 4.72588 14.802C5.18769 14.8031 5.58674 14.9713 5.92302 15.3064L11.8919 21.3174Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 681 B |
@@ -1,27 +0,0 @@
|
|||||||
---
|
|
||||||
import close16 from './svgs/close-16.svg?raw';
|
|
||||||
import close24 from './svgs/close-24.svg?raw';
|
|
||||||
import close32 from './svgs/close-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16 ) raw = close16;
|
|
||||||
else if (size === 24 ) raw = close24;
|
|
||||||
else if (size === 32 ) raw = close32;
|
|
||||||
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
|
|
||||||
|
|
||||||
|
|
||||||
const classes = ['nds-icon-close', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M13 3L3 13M13 13L3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 232 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M21 3L3 21M21 21L3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 232 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M29 3L3 29M29 29L3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 232 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import code16 from './svgs/code-16.svg?raw';
|
|
||||||
import code24 from './svgs/code-24.svg?raw';
|
|
||||||
import code32 from './svgs/code-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = code16;
|
|
||||||
else if (size === 24) raw = code24;
|
|
||||||
else if (size === 32) raw = code32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-code', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M5.22222 5.77778L3 8L5.22222 10.2222M10.7778 5.77778L13 8L10.7778 10.2222M9.11111 3.55556L6.88889 12.4444" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 290 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M7 8L3 12L7 16M17 8L21 12L17 16M14 4L10 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 244 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M8.77778 10.2222L3 16L8.77778 21.7778M23.2222 10.2222L29 16L23.2222 21.7778M18.8889 4.44444L13.1111 27.5556" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 309 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import cube16 from './svgs/cube-16.svg?raw';
|
|
||||||
import cube24 from './svgs/cube-24.svg?raw';
|
|
||||||
import cube32 from './svgs/cube-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = cube16;
|
|
||||||
else if (size === 24) raw = cube24;
|
|
||||||
else if (size === 32) raw = cube32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-cube', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M8.9024 0.210691L14.7691 2.93523C15.1362 3.10556 15.4469 3.37628 15.6649 3.71571C15.8829 4.05515 15.9991 4.44926 16 4.85194V11.1597C15.9991 11.5624 15.8829 11.9565 15.6649 12.2959C15.4469 12.6354 15.1362 12.9061 14.7691 13.0764L8.9024 15.801C8.61985 15.9321 8.31182 16 8 16C7.68818 16 7.38015 15.9321 7.0976 15.801L1.23093 13.0764C0.8638 12.9061 0.553063 12.6354 0.335075 12.2959C0.117087 11.9565 0.000863304 11.5624 0 11.1597V4.85194C0 4.44803 0.1152 4.0526 0.333867 3.707C0.552533 3.3614 0.862933 3.09425 1.23093 2.92356L7.0976 0.19903C7.38015 0.0679377 7.68818 0 8 0C8.31182 0 8.61985 0.0679377 8.9024 0.19903V0.210691ZM1.0624 4.85406V11.1618C1.06243 11.3635 1.12035 11.561 1.22937 11.7312C1.33838 11.9013 1.49397 12.037 1.67787 12.1223L7.4592 14.8044V7.55315L1.08053 4.62719C1.06453 4.70176 1.05666 4.77782 1.05707 4.85406H1.0624ZM14.9291 4.62825L8.5504 7.55421V14.8055L14.3317 12.1234C14.5158 12.038 14.6715 11.9021 14.7805 11.7318C14.8896 11.5615 14.9474 11.3637 14.9472 11.1618V4.85406C14.9472 4.77814 14.939 4.70243 14.9227 4.62825H14.9291ZM7.56907 1.17223L1.87307 3.81195L8.01707 6.6319L14.1611 3.81195L8.46507 1.17223C8.32379 1.10668 8.16978 1.07271 8.01387 1.07271C7.85796 1.07271 7.70394 1.10668 7.56267 1.17223H7.56907Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M13.3536 0.316037L22.1536 4.40284C22.7043 4.65834 23.1704 5.06442 23.4974 5.57357C23.8244 6.08272 23.9987 6.67389 24 7.27791V16.7396C23.9987 17.3436 23.8244 17.9348 23.4974 18.4439C23.1704 18.9531 22.7043 19.3592 22.1536 19.6147L13.3536 23.7015C12.9298 23.8981 12.4677 24 12 24C11.5323 24 11.0702 23.8981 10.6464 23.7015L1.8464 19.6147C1.2957 19.3592 0.829595 18.9531 0.502613 18.4439C0.175631 17.9348 0.00129496 17.3436 0 16.7396V7.27791C0 6.67205 0.1728 6.07891 0.5008 5.5605C0.8288 5.0421 1.2944 4.64137 1.8464 4.38535L10.6464 0.298544C11.0702 0.101907 11.5323 0 12 0C12.4677 0 12.9298 0.101907 13.3536 0.298544V0.316037ZM1.5936 7.28109V16.7428C1.59364 17.0453 1.68052 17.3416 1.84405 17.5968C2.00757 17.852 2.24096 18.0555 2.5168 18.1835L11.1888 22.2067V11.3297L1.6208 6.94079C1.59679 7.05264 1.58499 7.16673 1.5856 7.28109H1.5936ZM22.3936 6.94238L12.8256 11.3313V22.2083L21.4976 18.1851C21.7737 18.057 22.0072 17.8532 22.1708 17.5977C22.3343 17.3422 22.4211 17.0456 22.4208 16.7428V7.28109C22.4208 7.16721 22.4084 7.05365 22.384 6.94238H22.3936ZM11.3536 1.75834L2.8096 5.71793L12.0256 9.94785L21.2416 5.71793L12.6976 1.75834C12.4857 1.66003 12.2547 1.60907 12.0208 1.60907C11.7869 1.60907 11.5559 1.66003 11.344 1.75834H11.3536Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M17.8048 0.421382L29.5381 5.87045C30.2724 6.21112 30.8939 6.75256 31.3299 7.43143C31.7658 8.1103 31.9983 8.89852 32 9.70388V22.3194C31.9983 23.1248 31.7658 23.913 31.3299 24.5919C30.8939 25.2708 30.2724 25.8122 29.5381 26.1529L17.8048 31.6019C17.2397 31.8641 16.6236 32 16 32C15.3764 32 14.7603 31.8641 14.1952 31.6019L2.46187 26.1529C1.7276 25.8122 1.10613 25.2708 0.670151 24.5919C0.234175 23.913 0.00172661 23.1248 0 22.3194V9.70388C0 8.89606 0.2304 8.10521 0.667733 7.414C1.10507 6.7228 1.72587 6.18849 2.46187 5.84713L14.1952 0.398059C14.7603 0.135875 15.3764 0 16 0C16.6236 0 17.2397 0.135875 17.8048 0.398059V0.421382ZM2.1248 9.70813V22.3237C2.12485 22.7271 2.2407 23.1221 2.45873 23.4624C2.67677 23.8026 2.98794 24.074 3.35573 24.2446L14.9184 29.6089V15.1063L2.16107 9.25439C2.12905 9.40352 2.11332 9.55564 2.11413 9.70813H2.1248ZM29.8581 9.25651L17.1008 15.1084V29.611L28.6635 24.2468C29.0316 24.076 29.343 23.8043 29.561 23.4636C29.7791 23.1229 29.8948 22.7274 29.8944 22.3237V9.70813C29.8944 9.55627 29.8779 9.40487 29.8453 9.25651H29.8581ZM15.1381 2.34446L3.74613 7.62391L16.0341 13.2638L28.3221 7.62391L16.9301 2.34446C16.6476 2.21337 16.3396 2.14543 16.0277 2.14543C15.7159 2.14543 15.4079 2.21337 15.1253 2.34446H15.1381Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import download16 from './svgs/download-16.svg?raw';
|
|
||||||
import download24 from './svgs/download-24.svg?raw';
|
|
||||||
import download32 from './svgs/download-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = download16;
|
|
||||||
else if (size === 24) raw = download24;
|
|
||||||
else if (size === 32) raw = download32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-download', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M8.00001 3H9.67067V8.01199H11.759L8.00001 11.771M8.00001 3H6.32934V8.01199H4.24101L8.00001 11.771" fill="#F4F2EF"/>
|
|
||||||
<path d="M8.00001 3H9.67067V8.01199H11.759L8.00001 11.771L4.24101 8.01199H6.32934V3H8.00001Z" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M4.72905 13.5H11.271" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 522 B |
@@ -1,4 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12 4.5H13.7778V10.7857H16L12 15.5M12 4.5H10.2222V10.7857H8L12 15.5" fill="#F4F2EF" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M7 19.5H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 401 B |
@@ -1,4 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M16 4.5H19.1111V14.2143H23L16 21.5M16 4.5H12.8889V14.2143H9L16 21.5" fill="#F4F2EF" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M9.5 27.5H22.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 413 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import filter16 from './svgs/filter-16.svg?raw';
|
|
||||||
import filter24 from './svgs/filter-24.svg?raw';
|
|
||||||
import filter32 from './svgs/filter-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = filter16;
|
|
||||||
else if (size === 24) raw = filter24;
|
|
||||||
else if (size === 32) raw = filter32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-filter', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M3 4.66667H13M4.66667 8H11.3333M6.66667 11.3333H9.33333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 267 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M3 6H21M6 12H18M9.6 18H14.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 239 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M3 7.33333H29M7.33333 16H24.6667M12.5333 24.6667H19.4667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 268 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import help16 from './svgs/help-16.svg?raw';
|
|
||||||
import help24 from './svgs/help-24.svg?raw';
|
|
||||||
import help32 from './svgs/help-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = help16;
|
|
||||||
else if (size === 24) raw = help24;
|
|
||||||
else if (size === 32) raw = help32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-help', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13Z" stroke="currentColor"/>
|
|
||||||
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" stroke-width="1.5"/>
|
|
||||||
<path d="M9.5 6.5L11.5 4.5M4.5 11.5L6.5 9.5M6.5 6.5L4.5 4.5M11.5 11.5L9.5 9.5" stroke="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 511 B |
@@ -1,5 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="1.5"/>
|
|
||||||
<path d="M12 15.6C13.9882 15.6 15.6 13.9882 15.6 12C15.6 10.0118 13.9882 8.4 12 8.4C10.0118 8.4 8.39999 10.0118 8.39999 12C8.39999 13.9882 10.0118 15.6 12 15.6Z" stroke="currentColor" stroke-width="1.5"/>
|
|
||||||
<path d="M14.7 9.3L18.3 5.7M5.7 18.3L9.3 14.7M9.3 9.3L5.7 5.7M18.3 18.3L14.7 14.7" stroke="currentColor" stroke-width="1.5"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 601 B |
@@ -1,4 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29Z" stroke="currentColor" stroke-width="1.5"/>
|
|
||||||
<path d="M16 21.2C18.8719 21.2 21.2 18.8719 21.2 16C21.2 13.1281 18.8719 10.8 16 10.8C13.1281 10.8 10.8 13.1281 10.8 16C10.8 18.8719 13.1281 21.2 16 21.2Z" stroke="currentColor" stroke-width="1.5"/>
|
|
||||||
<path d="M19.9 12.1L25.1 6.89999M6.89999 25.1L12.1 19.9M12.1 12.1L6.89999 6.89999M25.1 25.1L19.9 19.9" stroke="currentColor" stroke-width="1.5"/>
|
|
||||||
|
Before Width: | Height: | Size: 603 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import home16 from './svgs/home-16.svg?raw';
|
|
||||||
import home24 from './svgs/home-24.svg?raw';
|
|
||||||
import home32 from './svgs/home-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = home16;
|
|
||||||
else if (size === 24) raw = home24;
|
|
||||||
else if (size === 32) raw = home32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-home', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M4.57143 11.8571H6.28572V9C6.28572 8.83809 6.34057 8.70247 6.45029 8.59314C6.56 8.48381 6.69562 8.42895 6.85714 8.42857H9.14286C9.30476 8.42857 9.44057 8.48343 9.55029 8.59314C9.66 8.70286 9.71467 8.83847 9.71429 9V11.8571H11.4286V6.71428L8 4.14286L4.57143 6.71428V11.8571ZM3.42857 11.8571V6.71428C3.42857 6.53333 3.46914 6.3619 3.55029 6.2C3.63143 6.03809 3.74324 5.90476 3.88572 5.8L7.31429 3.22857C7.51429 3.07619 7.74286 3 8 3C8.25714 3 8.48572 3.07619 8.68572 3.22857L12.1143 5.8C12.2571 5.90476 12.3691 6.03809 12.4503 6.2C12.5314 6.3619 12.5718 6.53333 12.5714 6.71428V11.8571C12.5714 12.1714 12.4594 12.4406 12.2354 12.6646C12.0114 12.8886 11.7425 13.0004 11.4286 13H9.14286C8.98095 13 8.84533 12.9451 8.736 12.8354C8.62667 12.7257 8.57181 12.5901 8.57143 12.4286V9.57143H7.42857V12.4286C7.42857 12.5905 7.37372 12.7263 7.264 12.836C7.15429 12.9457 7.01867 13.0004 6.85714 13H4.57143C4.25714 13 3.98819 12.8882 3.76457 12.6646C3.54095 12.4409 3.42895 12.1718 3.42857 11.8571Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M5.82857 18.9429H8.91428V13.8C8.91428 13.5086 9.01302 13.2645 9.21051 13.0677C9.40799 12.8709 9.65211 12.7721 9.94285 12.7714H14.0571C14.3486 12.7714 14.593 12.8702 14.7905 13.0677C14.988 13.2651 15.0864 13.5093 15.0857 13.8V18.9429H18.1714V9.68571L12 5.05714L5.82857 9.68571V18.9429ZM3.77142 18.9429V9.68571C3.77142 9.36 3.84445 9.05143 3.99051 8.76C4.13657 8.46857 4.33782 8.22857 4.59428 8.04L10.7657 3.41143C11.1257 3.13714 11.5371 3 12 3C12.4629 3 12.8743 3.13714 13.2343 3.41143L19.4057 8.04C19.6629 8.22857 19.8644 8.46857 20.0105 8.76C20.1566 9.05143 20.2292 9.36 20.2286 9.68571V18.9429C20.2286 19.5086 20.027 19.993 19.6238 20.3962C19.2206 20.7994 18.7364 21.0007 18.1714 21H14.0571C13.7657 21 13.5216 20.9013 13.3248 20.7038C13.128 20.5063 13.0293 20.2622 13.0286 19.9714V14.8286H10.9714V19.9714C10.9714 20.2629 10.8727 20.5073 10.6752 20.7048C10.4777 20.9023 10.2336 21.0007 9.94285 21H5.82857C5.26285 21 4.77874 20.7987 4.37622 20.3962C3.97371 19.9937 3.77211 19.5093 3.77142 18.9429Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M7.08572 26.0286H11.5429V18.6C11.5429 18.179 11.6855 17.8264 11.9707 17.5422C12.256 17.2579 12.6086 17.1153 13.0286 17.1143H18.9714C19.3924 17.1143 19.7455 17.2569 20.0307 17.5422C20.316 17.8274 20.4581 18.18 20.4571 18.6V26.0286H24.9143V12.6571L16 5.97143L7.08572 12.6571V26.0286ZM4.11429 26.0286V12.6571C4.11429 12.1867 4.21977 11.741 4.43075 11.32C4.64172 10.899 4.93242 10.5524 5.30286 10.28L14.2171 3.59429C14.7371 3.1981 15.3314 3 16 3C16.6686 3 17.2629 3.1981 17.7829 3.59429L26.6971 10.28C27.0686 10.5524 27.3598 10.899 27.5707 11.32C27.7817 11.741 27.8867 12.1867 27.8857 12.6571V26.0286C27.8857 26.8457 27.5945 27.5455 27.0121 28.1279C26.4297 28.7103 25.7304 29.001 24.9143 29H18.9714C18.5505 29 18.1979 28.8574 17.9136 28.5721C17.6293 28.2869 17.4867 27.9342 17.4857 27.5143V20.0857H14.5143V27.5143C14.5143 27.9352 14.3717 28.2883 14.0864 28.5736C13.8011 28.8589 13.4485 29.001 13.0286 29H7.08572C6.26857 29 5.5693 28.7093 4.98789 28.1279C4.40648 27.5465 4.11528 26.8467 4.11429 26.0286Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,25 +0,0 @@
|
|||||||
export { default as Arrow2Icon } from './Arrow2/Arrow2.astro';
|
|
||||||
export { default as BinIcon } from './bin/bin.astro';
|
|
||||||
export { default as BurgerIcon } from './burger/burger.astro';
|
|
||||||
export { default as CalendarIcon } from './calendar/calendar.astro';
|
|
||||||
export { default as CheckIcon } from './check/check.astro';
|
|
||||||
export { default as CloseIcon } from './close/close.astro';
|
|
||||||
export { default as CodeIcon } from './code/code.astro';
|
|
||||||
export { default as CubeIcon } from './cube/cube.astro';
|
|
||||||
export { default as DownloadIcon } from './download/download.astro';
|
|
||||||
export { default as FilterIcon } from './filter/filter.astro';
|
|
||||||
export { default as HelpIcon } from './help/help.astro';
|
|
||||||
export { default as HomeIcon } from './home/home.astro';
|
|
||||||
export { default as LinkIcon } from './link/link.astro';
|
|
||||||
export { default as MinusIcon } from './minus/minus.astro';
|
|
||||||
export { default as MoreIcon } from './more/more.astro';
|
|
||||||
export { default as OverviewIcon } from './overview/overview.astro';
|
|
||||||
export { default as PlusIcon } from './plus/plus.astro';
|
|
||||||
export { default as ProfileIcon } from './profile/profile.astro';
|
|
||||||
export { default as SearchIcon } from './search/search.astro';
|
|
||||||
export { default as SettingsIcon } from './settings/settings.astro';
|
|
||||||
export { default as ShareIcon } from './share/share.astro';
|
|
||||||
export { default as ShieldIcon } from './shield/shield.astro';
|
|
||||||
export { default as SortIcon } from './sort/sort.astro';
|
|
||||||
export { default as StatsIcon } from './stats/stats.astro';
|
|
||||||
export { default as UploadIcon } from './upload/upload.astro';
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import link16 from './svgs/link-16.svg?raw';
|
|
||||||
import link24 from './svgs/link-24.svg?raw';
|
|
||||||
import link32 from './svgs/link-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = link16;
|
|
||||||
else if (size === 24) raw = link24;
|
|
||||||
else if (size === 32) raw = link32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-link', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M8.57143 4.57143L9.71429 3.42857C10.2857 2.85714 11.4286 2.85714 12 3.42857L12.5714 4C13.1429 4.57143 13.1429 5.71429 12.5714 6.28571L9.71429 9.14286C9.14286 9.71429 8 9.71429 7.42857 9.14286M7.42857 11.4286L6.28571 12.5714C5.71429 13.1429 4.57143 13.1429 4 12.5714L3.42857 12C2.85714 11.4286 2.85714 10.2857 3.42857 9.71429L6.28571 6.85714C6.85714 6.28571 8 6.28571 8.57143 6.85714" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 586 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M13.0286 5.82857L15.0857 3.77143C16.1143 2.74286 18.1714 2.74286 19.2 3.77143L20.2286 4.8C21.2571 5.82857 21.2571 7.88571 20.2286 8.91429L15.0857 14.0571C14.0571 15.0857 12 15.0857 10.9714 14.0571M10.9714 18.1714L8.91429 20.2286C7.88571 21.2571 5.82857 21.2571 4.8 20.2286L3.77143 19.2C2.74286 18.1714 2.74286 16.1143 3.77143 15.0857L8.91429 9.94286C9.94286 8.91429 12 8.91429 13.0286 9.94286" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 594 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M17.4857 7.08571L20.4571 4.11429C21.9429 2.62857 24.9143 2.62857 26.4 4.11429L27.8857 5.6C29.3714 7.08571 29.3714 10.0571 27.8857 11.5429L20.4571 18.9714C18.9714 20.4571 16 20.4571 14.5143 18.9714M14.5143 24.9143L11.5429 27.8857C10.0571 29.3714 7.08571 29.3714 5.6 27.8857L4.11429 26.4C2.62857 24.9143 2.62857 21.9429 4.11429 20.4571L11.5429 13.0286C13.0286 11.5429 16 11.5429 17.4857 13.0286" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 596 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import minus16 from './svgs/minus-16.svg?raw';
|
|
||||||
import minus24 from './svgs/minus-24.svg?raw';
|
|
||||||
import minus32 from './svgs/minus-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = minus16;
|
|
||||||
else if (size === 24) raw = minus24;
|
|
||||||
else if (size === 32) raw = minus32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-minus', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 217 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 226 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M3 16H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 218 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import more16 from './svgs/more-16.svg?raw';
|
|
||||||
import more24 from './svgs/more-24.svg?raw';
|
|
||||||
import more32 from './svgs/more-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = more16;
|
|
||||||
else if (size === 24) raw = more24;
|
|
||||||
else if (size === 32) raw = more32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-more', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="3" viewBox="0 0 16 3" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M1.33333 0C0.6 0 0 0.675 0 1.5C0 2.325 0.6 3 1.33333 3C2.06667 3 2.66667 2.325 2.66667 1.5C2.66667 0.675 2.06667 0 1.33333 0ZM14.6667 0C13.9333 0 13.3333 0.675 13.3333 1.5C13.3333 2.325 13.9333 3 14.6667 3C15.4 3 16 2.325 16 1.5C16 0.675 15.4 0 14.6667 0ZM8 0C7.26667 0 6.66667 0.675 6.66667 1.5C6.66667 2.325 7.26667 3 8 3C8.73333 3 9.33333 2.325 9.33333 1.5C9.33333 0.675 8.73333 0 8 0Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 525 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="4" viewBox="0 0 24 4" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM22 0C20.9 0 20 0.9 20 2C20 3.1 20.9 4 22 4C23.1 4 24 3.1 24 2C24 0.9 23.1 0 22 0ZM12 0C10.9 0 10 0.9 10 2C10 3.1 10.9 4 12 4C13.1 4 14 3.1 14 2C14 0.9 13.1 0 12 0Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 378 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="5" viewBox="0 0 32 5" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M2.66667 0C1.2 0 0 1.125 0 2.5C0 3.875 1.2 5 2.66667 5C4.13333 5 5.33333 3.875 5.33333 2.5C5.33333 1.125 4.13333 0 2.66667 0ZM29.3333 0C27.8667 0 26.6667 1.125 26.6667 2.5C26.6667 3.875 27.8667 5 29.3333 5C30.8 5 32 3.875 32 2.5C32 1.125 30.8 0 29.3333 0ZM16 0C14.5333 0 13.3333 1.125 13.3333 2.5C13.3333 3.875 14.5333 5 16 5C17.4667 5 18.6667 3.875 18.6667 2.5C18.6667 1.125 17.4667 0 16 0Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 528 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import overview16 from './svgs/overview-16.svg?raw';
|
|
||||||
import overview24 from './svgs/overview-24.svg?raw';
|
|
||||||
import overview32 from './svgs/overview-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = overview16;
|
|
||||||
else if (size === 24) raw = overview24;
|
|
||||||
else if (size === 32) raw = overview32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-overview', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M8.55556 6.33333V3H13V6.33333H8.55556ZM3 8.55556V3H7.44444V8.55556H3ZM8.55556 13V7.44444H13V13H8.55556ZM3 13V9.66667H7.44444V13H3Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 277 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M13 9V3H21V9H13ZM3 13V3H11V13H3ZM13 21V11H21V21H13ZM3 21V15H11V21H3Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 207 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M17.4444 11.8333V3.5H29V11.8333H17.4444ZM3 17.3889V3.5H14.5556V17.3889H3ZM17.4444 28.5V14.6111H29V28.5H17.4444ZM3 28.5V20.1667H14.5556V28.5H3Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 289 B |
@@ -1,26 +0,0 @@
|
|||||||
---
|
|
||||||
import plus16 from './svgs/plus-16.svg?raw';
|
|
||||||
import plus24 from './svgs/plus-24.svg?raw';
|
|
||||||
import plus32 from './svgs/plus-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16) raw = plus16;
|
|
||||||
else if (size === 24) raw = plus24;
|
|
||||||
else if (size === 32) raw = plus32;
|
|
||||||
else raw = '';
|
|
||||||
|
|
||||||
const classes = ['nds-icon-plus', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12.375 7.375H8.625V3.625C8.625 3.45924 8.55915 3.30027 8.44194 3.18306C8.32473 3.06585 8.16576 3 8 3C7.83424 3 7.67527 3.06585 7.55806 3.18306C7.44085 3.30027 7.375 3.45924 7.375 3.625V7.375H3.625C3.45924 7.375 3.30027 7.44085 3.18306 7.55806C3.06585 7.67527 3 7.83424 3 8C3 8.16576 3.06585 8.32473 3.18306 8.44194C3.30027 8.55915 3.45924 8.625 3.625 8.625H7.375V12.375C7.375 12.5408 7.44085 12.6997 7.55806 12.8169C7.67527 12.9342 7.83424 13 8 13C8.16576 13 8.32473 12.9342 8.44194 12.8169C8.55915 12.6997 8.625 12.5408 8.625 12.375V8.625H12.375C12.5408 8.625 12.6997 8.55915 12.8169 8.44194C12.9342 8.32473 13 8.16576 13 8C13 7.83424 12.9342 7.67527 12.8169 7.55806C12.6997 7.44085 12.5408 7.375 12.375 7.375Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 851 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M19.875 10.875H13.125V4.125C13.125 3.82663 13.0065 3.54048 12.7955 3.32951C12.5845 3.11853 12.2984 3 12 3C11.7016 3 11.4155 3.11853 11.2045 3.32951C10.9935 3.54048 10.875 3.82663 10.875 4.125V10.875H4.125C3.82663 10.875 3.54048 10.9935 3.32951 11.2045C3.11853 11.4155 3 11.7016 3 12C3 12.2984 3.11853 12.5845 3.32951 12.7955C3.54048 13.0065 3.82663 13.125 4.125 13.125H10.875V19.875C10.875 20.1734 10.9935 20.4595 11.2045 20.6705C11.4155 20.8815 11.7016 21 12 21C12.2984 21 12.5845 20.8815 12.7955 20.6705C13.0065 20.4595 13.125 20.1734 13.125 19.875V13.125H19.875C20.1734 13.125 20.4595 13.0065 20.6705 12.7955C20.8815 12.5845 21 12.2984 21 12C21 11.7016 20.8815 11.4155 20.6705 11.2045C20.4595 10.9935 20.1734 10.875 19.875 10.875Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 880 B |
@@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"ntColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M27.375 14.375H17.625V4.625C17.625 4.19402 17.4538 3.7807 17.149 3.47595C16.8443 3.17121 16.431 3 16 3C15.569 3 15.1557 3.17121 14.851 3.47595C14.5462 3.7807 14.375 4.19402 14.375 4.625V14.375H4.625C4.19402 14.375 3.7807 14.5462 3.47595 14.851C3.17121 15.1557 3 15.569 3 16C3 16.431 3.17121 16.8443 3.47595 17.149C3.7807 17.4538 4.19402 17.625 4.625 17.625H14.375V27.375C14.375 27.806 14.5462 28.2193 14.851 28.524C15.1557 28.8288 15.569 29 16 29C16.431 29 16.8443 28.8288 17.149 28.524C17.4538 28.2193 17.625 27.806 17.625 27.375V17.625H27.375C27.806 17.625 28.2193 17.4538 28.524 17.149C28.8288 16.8443 29 16.431 29 16C29 15.569 28.8288 15.1557 28.524 14.851C28.2193 14.5462 27.806 14.375 27.375 14.375Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 852 B |
@@ -1,27 +0,0 @@
|
|||||||
---
|
|
||||||
import profile16 from './svgs/profile-16.svg?raw';
|
|
||||||
import profile24 from './svgs/profile-24.svg?raw';
|
|
||||||
import profile32 from './svgs/profile-32.svg?raw';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
size: 16 | 24 | 32;
|
|
||||||
label?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { size = 24, label, class: className } = Astro.props;
|
|
||||||
|
|
||||||
let raw: string;
|
|
||||||
if (size === 16 ) raw = profile16;
|
|
||||||
else if (size === 24 ) raw = profile24;
|
|
||||||
else if (size === 32 ) raw = profile32;
|
|
||||||
else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
|
|
||||||
|
|
||||||
|
|
||||||
const classes = ['nds-icon-profile', className].filter(Boolean).join(' ');
|
|
||||||
const svg = raw
|
|
||||||
.replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
|
|
||||||
.replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
|
|
||||||
---
|
|
||||||
|
|
||||||
<Fragment set:html={svg} />
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.77778 5.22222C5.77778 4.63285 6.0119 4.06762 6.42865 3.65087C6.8454 3.23413 7.41063 3 8 3C8.58937 3 9.1546 3.23413 9.57135 3.65087C9.9881 4.06762 10.2222 4.63285 10.2222 5.22222C10.2222 5.81159 9.9881 6.37682 9.57135 6.79357C9.1546 7.21032 8.58937 7.44444 8 7.44444C7.41063 7.44444 6.8454 7.21032 6.42865 6.79357C6.0119 6.37682 5.77778 5.81159 5.77778 5.22222ZM5.77778 8.55556C5.04107 8.55556 4.33453 8.84821 3.81359 9.36915C3.29266 9.89008 3 10.5966 3 11.3333C3 11.7754 3.17559 12.1993 3.48816 12.5118C3.80072 12.8244 4.22464 13 4.66667 13H11.3333C11.7754 13 12.1993 12.8244 12.5118 12.5118C12.8244 12.1993 13 11.7754 13 11.3333C13 10.5966 12.7073 9.89008 12.1864 9.36915C11.6655 8.84821 10.9589 8.55556 10.2222 8.55556H5.77778Z" fill="#F4F2EF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 911 B |