├── .astro
    └── types.d.ts
├── .changeset
    ├── README.md
    └── config.json
├── .editorconfig
├── .github
    ├── actions
    │   └── install
    │   │   └── action.yml
    ├── renovate.json5
    └── workflows
    │   ├── ci.yml
    │   └── release.yml
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc.js
├── .vscode
    └── settings.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── astro.config.ts
├── env.d.ts
├── eslint-plugin-import.d.ts
├── eslint.config.js
├── index.ts
├── package.json
├── pnpm-lock.yaml
├── src
    ├── assets
    │   └── astro-full-logo-light.svg
    ├── components
    │   ├── Story.astro
    │   └── Svg
    │   │   ├── Svg.astro
    │   │   ├── overrideSvgAttributes.bench.ts
    │   │   ├── overrideSvgAttributes.test.ts
    │   │   └── overrideSvgAttributes.ts
    ├── env.d.ts
    ├── layouts
    │   └── Layout.astro
    ├── pages
    │   └── index.astro
    └── types.ts
└── tsconfig.json


/.astro/types.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | 


--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
 1 | # Changesets
 2 | 
 3 | Hello and welcome! This folder has been automatically generated by
 4 | `@changesets/cli`, a build tool that works with multi-package repos, or
 5 | single-package repos to help you version and publish your code. You can find the
 6 | full documentation for it
 7 | [in our repository](https://github.com/changesets/changesets)
 8 | 
 9 | We have a quick list of common questions to get you started engaging with this
10 | project in
11 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
12 | 


--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
3 |   "changelog": "@changesets/cli/changelog",
4 |   "commit": false,
5 |   "access": "public",
6 |   "baseBranch": "main",
7 |   "updateInternalDependencies": "patch"
8 | }
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | indent_style = space
 8 | indent_size = 2
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 
14 | [*.yml]
15 | indent_size = 2
16 | 


--------------------------------------------------------------------------------
/.github/actions/install/action.yml:
--------------------------------------------------------------------------------
 1 | name: Install Tools & Dependencies
 2 | description: Installs pnpm, Node.js & package dependencies
 3 | 
 4 | runs:
 5 |   using: composite
 6 |   steps:
 7 |     - name: Setup pnpm
 8 |       uses: pnpm/action-setup@v4
 9 | 
10 |     - name: Setup Node ${{ inputs.node-version }}
11 |       uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
12 |       with:
13 |         node-version-file: ".nvmrc"
14 |         cache: pnpm
15 | 
16 |     - name: Install dependencies
17 |       run: pnpm install
18 |       shell: bash
19 | 


--------------------------------------------------------------------------------
/.github/renovate.json5:
--------------------------------------------------------------------------------
 1 | {
 2 |   $schema: "https://docs.renovatebot.com/renovate-schema.json",
 3 |   extends: ["config:best-practices", "config:js-lib"],
 4 |   rangeStrategy: "update-lockfile",
 5 |   lockFileMaintenance: {
 6 |     enabled: true,
 7 |     automerge: true,
 8 |   },
 9 |   packageRules: [
10 |     {
11 |       groupName: "prettier and plugins",
12 |       matchPackageNames: ["prettier"],
13 |     },
14 |   ],
15 | }
16 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - main
 6 |   pull_request:
 7 |     branches:
 8 |       - main
 9 | jobs:
10 |   lint:
11 |     name: Lint and typecheck
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - name: Checkout code
15 |         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
16 |       - name: Install Tools & Dependencies
17 |         uses: ./.github/actions/install
18 |       - name: Check `*.astro` types
19 |         run: pnpm check:astro
20 |       - name: Check `*.ts` types
21 |         run: pnpm check:ts
22 |       - name: Lint astro and ts
23 |         run: pnpm lint
24 |       - name: Check formatting
25 |         run: pnpm format:check
26 |   test:
27 |     name: Test
28 |     runs-on: ubuntu-latest
29 |     steps:
30 |       - name: Checkout code
31 |         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
32 |       - name: Install Tools & Dependencies
33 |         uses: ./.github/actions/install
34 |       - name: Test
35 |         run: pnpm test
36 |   build-docs:
37 |     name: Smoke-Test Docs Site
38 |     runs-on: ubuntu-latest
39 |     steps:
40 |       - name: Checkout code
41 |         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
42 |       - name: Install Tools & Dependencies
43 |         uses: ./.github/actions/install
44 |       - name: Build the docs
45 |         run: pnpm build
46 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | defaults:
 9 |   run:
10 |     shell: bash
11 | 
12 | jobs:
13 |   changelog:
14 |     name: Changelog PR or Release
15 |     if: ${{ github.repository_owner == 'jasikpark' }}
16 |     runs-on: ubuntu-latest
17 |     permissions:
18 |       contents: write
19 |       id-token: write
20 |       pull-requests: write
21 |     steps:
22 |       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
23 | 
24 |       - name: Install Tools & Dependencies
25 |         uses: ./.github/actions/install
26 | 
27 |       - name: Create Release Pull Request or Publish
28 |         id: changesets
29 |         uses: changesets/action@v1
30 |         with:
31 |           # Note: pnpm install after versioning is necessary to refresh lockfile
32 |           version: pnpm run version
33 |           publish: pnpm exec changeset publish
34 |           commit: "[ci] release"
35 |           title: "[ci] release"
36 |         env:
37 |           # Needs access to push to main
38 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
39 |           # Needs access to publish to npm
40 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
41 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ### Node ###
 2 | # Logs
 3 | logs
 4 | *.log
 5 | npm-debug.log*
 6 | yarn-debug.log*
 7 | yarn-error.log*
 8 | lerna-debug.log*
 9 | .pnpm-debug.log*
10 | 
11 | # Diagnostic reports (https://nodejs.org/api/report.html)
12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | *.lcov
17 | 
18 | 
19 | # Dependency directories
20 | node_modules/
21 | 
22 | # TypeScript cache
23 | *.tsbuildinfo
24 | 
25 | # Optional npm cache directory
26 | .npm
27 | 
28 | # Optional eslint cache
29 | .eslintcache
30 | 
31 | # Optional stylelint cache
32 | .stylelintcache
33 | 
34 | # Optional REPL history
35 | .node_repl_history
36 | 
37 | # Output of 'npm pack'
38 | *.tgz
39 | 
40 | # Yarn Integrity file
41 | .yarn-integrity
42 | 
43 | # dotenv environment variable files
44 | .env
45 | .env.development.local
46 | .env.test.local
47 | .env.production.local
48 | .env.local
49 | 
50 | # parcel-bundler cache (https://parceljs.org/)
51 | .cache
52 | .parcel-cache
53 | 
54 | # FuseBox cache
55 | .fusebox/
56 | 
57 | # DynamoDB Local files
58 | .dynamodb/
59 | 
60 | # TernJS port file
61 | .tern-port
62 | 
63 | # Stores VSCode versions used for testing VSCode extensions
64 | .vscode-test
65 | 
66 | # yarn v2
67 | .yarn/cache
68 | .yarn/unplugged
69 | .yarn/build-state.yml
70 | .yarn/install-state.gz
71 | .pnp.*
72 | 
73 | 
74 | dist/
75 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 22.14.0
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Ignore artifacts:
2 | dist
3 | coverage
4 | pnpm-lock.yaml
5 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | /** @type {import("prettier").Config & { experimentalTernaries: true }} */
 2 | export default {
 3 |   proseWrap: "preserve",
 4 |   plugins: ["prettier-plugin-astro"],
 5 |   overrides: [
 6 |     {
 7 |       files: "*.astro",
 8 |       options: {
 9 |         parser: "astro",
10 |       },
11 |     },
12 |   ],
13 |   experimentalTernaries: true,
14 | };
15 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "prettier.documentSelectors": ["**/*.astro"],
 3 |   "[astro]": {
 4 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
 5 |   },
 6 |   "languageToolLinter.languageTool.ignoredWordsInWorkspace": ["astro", "vite"],
 7 |   "eslint.validate": [
 8 |     "javascript",
 9 |     "javascriptreact",
10 |     "astro", // Enable .astro
11 |     "typescript", // Enable .ts
12 |     "typescriptreact" // Enable .tsx
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # @jasikpark/astro-svg-loader
 2 | 
 3 | ## 0.3.1
 4 | 
 5 | ### Patch Changes
 6 | 
 7 | - 83f32ce: Remove extraneous dependency
 8 | 
 9 | ## 0.3.0
10 | 
11 | ### Minor Changes
12 | 
13 | - 523a49e: Permit Astro 4.0 as a peer dep
14 | 
15 | ## 0.2.0
16 | 
17 | ### Minor Changes
18 | 
19 | - f755968: Update to allow Astro v3 as a valid peer dep
20 | 
21 | ### Patch Changes
22 | 
23 | - afa45a0: Start publishing with provenance (https://docs.npmjs.com/generating-provenance-statements)
24 | 
25 | ## 0.1.0
26 | 
27 | ### Minor Changes
28 | 
29 | - eb2f29a: Move to supporting astro v2 instead of astro v1
30 | 
31 | ### Patch Changes
32 | 
33 | - 57e5f36: Error on `alt` prop passed to SVG; `aria-hidden` or `aria-label`
34 |   should be used instead.
35 | 
36 | ## 0.0.2
37 | 
38 | ### Patch Changes
39 | 
40 | - 99b36fe: Update README installation instructions
41 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity and
 10 | orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | - Demonstrating empathy and kindness toward other people
 21 | - Being respectful of differing opinions, viewpoints, and experiences
 22 | - Giving and gracefully accepting constructive feedback
 23 | - Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | - Focusing on what is best not just for us as individuals, but for the overall
 26 |   community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | - The use of sexualized language or imagery, and sexual attention or advances of
 31 |   any kind
 32 | - Trolling, insulting or derogatory comments, and personal or political attacks
 33 | - Public or private harassment
 34 | - Publishing others' private information, such as a physical or email address,
 35 |   without their explicit permission
 36 | - Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | calebjasik@jasik.xyz. All complaints will be reviewed and investigated promptly
 64 | and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series of
 86 | actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or permanent
 93 | ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within the
113 | community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by
122 | [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Caleb Jasik
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # `@jasikpark/astro-svg-loader`
 2 | 
 3 | [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fjasikpark%2Fastro-svg-loader.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fjasikpark%2Fastro-svg-loader?ref=badge_shield) [![Tested with fast-check](https://img.shields.io/badge/tested%20with-fast%E2%80%91check%20%F0%9F%90%92-%23282ea9?flat&logoSize=auto&labelColor=%231b1b1d)](https://fast-check.dev/)
 4 | 
 5 | This package allows you to import SVGs as Astro components, using
 6 | [@natemoo-re](https://github.com/natemoo-re)'s `ultrahtml` and vite's support
 7 | for
 8 | [raw imports](https://vitejs.dev/guide/assets.html#importing-asset-as-string) to
 9 | do the trick.
10 | 
11 | Taking inspiration from <https://css-tricks.com/pretty-good-svg-icon-system/>
12 | that holds that icons should always be inlined.
13 | 
14 | Usage:
15 | 
16 | Peer deps are `astro`
17 | 
18 | ```
19 | npm add -D @jasikpark/astro-svg-loader
20 | ```
21 | 
22 | ```
23 | yarn add -D @jasikpark/astro-svg-loader
24 | ```
25 | 
26 | ```
27 | pnpm add -D @jasikpark/astro-svg-loader
28 | ```
29 | 
30 | then in an Astro component:
31 | 
32 | ```astro
33 | ---
34 | import Svg from "@jasikpark/astro-svg-loader";
35 | ---
36 | 
37 | <Svg
38 |   src={import("#assets/my-cool-illustration.svg?raw")}
39 |   aria-label="Cool illustration of an abstract nebula"
40 | />
41 | ```
42 | 
43 | Be sure to use a raw import: `?raw`, or you'll import the URL rather than the
44 | SVG source.
45 | 
46 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/jasikpark/astro-svg-loader/)
47 | 
48 | ## License
49 | 
50 | [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fjasikpark%2Fastro-svg-loader.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fjasikpark%2Fastro-svg-loader?ref=badge_large)
51 | 
52 | ## Inspiration
53 | 
54 | - [astro-icon](https://github.com/natemoo-re/astro-icon)
55 | - [svgr](https://react-svgr.com/)
56 | 


--------------------------------------------------------------------------------
/astro.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "astro/config";
 2 | 
 3 | export default defineConfig({
 4 |   vite: {
 5 |     test: {
 6 |       sequence: {
 7 |         shuffle: true,
 8 |       },
 9 |     },
10 |   },
11 | });
12 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | 


--------------------------------------------------------------------------------
/eslint-plugin-import.d.ts:
--------------------------------------------------------------------------------
1 | declare module "eslint-plugin-import";
2 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | 
 3 | import eslint from "@eslint/js";
 4 | import eslintPluginAstro from "eslint-plugin-astro";
 5 | import tseslint from "typescript-eslint";
 6 | import { flatConfigs as importFlatConfigs } from "eslint-plugin-import";
 7 | 
 8 | export default tseslint.config(
 9 |   {
10 |     ignores: ["dist", ".astro/"],
11 |   },
12 |   eslint.configs.recommended,
13 |   ...tseslint.configs.strictTypeChecked,
14 |   ...tseslint.configs.stylisticTypeChecked,
15 |   {
16 |     languageOptions: {
17 |       parserOptions: {
18 |         projectService: true,
19 |         // @ts-expect-error -- dirname is missing on the type :shrug:
20 |         tsconfigRootDir: import.meta.dirname,
21 |       },
22 |     },
23 |     rules: {
24 |       "@typescript-eslint/consistent-type-definitions": ["error", "type"],
25 |     },
26 |   },
27 |   importFlatConfigs.recommended,
28 |   importFlatConfigs.typescript,
29 |   {
30 |     settings: {
31 |       "import/resolver": {
32 |         typescript: true,
33 |       },
34 |     },
35 |   },
36 |   ...eslintPluginAstro.configs["jsx-a11y-recommended"],
37 | );
38 | 


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
 1 | // Do not write code directly here, instead use the `src` folder!
 2 | // Then, use this file to export everything you want your user to access.
 3 | 
 4 | // TS has issues validating that Astro components exist when imported.
 5 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 6 | // @ts-ignore
 7 | import Svg from "./src/components/Svg/Svg.astro";
 8 | 
 9 | export default Svg;
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@jasikpark/astro-svg-loader",
 3 |   "repository": {
 4 |     "url": "https://github.com/jasikpark/astro-svg-loader"
 5 |   },
 6 |   "license": "MIT",
 7 |   "version": "0.3.1",
 8 |   "type": "module",
 9 |   "exports": {
10 |     ".": "./index.ts"
11 |   },
12 |   "files": [
13 |     "src",
14 |     "index.ts"
15 |   ],
16 |   "keywords": [
17 |     "astro-component",
18 |     "svg",
19 |     "svg-loader"
20 |   ],
21 |   "scripts": {
22 |     "preinstall": "npx only-allow pnpm",
23 |     "dev": "astro dev",
24 |     "build": "astro build",
25 |     "preview": "astro preview",
26 |     "format": "prettier -w .",
27 |     "format:check": "prettier -c .",
28 |     "test": "vitest --run",
29 |     "test:watch": "vitest",
30 |     "test:watch:ui": "vitest --ui",
31 |     "lint": "eslint",
32 |     "check:astro": "astro check",
33 |     "check:ts": "tsc -p .",
34 |     "check": "pnpm run '/^check:.*/'",
35 |     "version": "changeset version && pnpm install --no-frozen-lockfile && pnpm format",
36 |     "changeset": "changeset"
37 |   },
38 |   "devDependencies": {
39 |     "@astrojs/check": "0.9.4",
40 |     "@changesets/cli": "2.29.1",
41 |     "@eslint/js": "9.24.0",
42 |     "@ianvs/prettier-plugin-sort-imports": "4.4.1",
43 |     "@types/eslint__js": "8.42.3",
44 |     "@typescript-eslint/parser": "8.30.1",
45 |     "@vitest/ui": "3.1.2",
46 |     "astro": "4.16.18",
47 |     "eslint": "8.57.1",
48 |     "eslint-plugin-astro": "1.3.1",
49 |     "eslint-plugin-import": "2.31.0",
50 |     "eslint-plugin-jsx-a11y": "6.10.2",
51 |     "fast-check": "4.1.1",
52 |     "prettier": "3.5.3",
53 |     "prettier-plugin-astro": "0.14.1",
54 |     "shiki": "2.5.0",
55 |     "typescript": "5.8.3",
56 |     "typescript-eslint": "8.30.1",
57 |     "vitest": "3.1.2"
58 |   },
59 |   "peerDependencies": {
60 |     "astro": "^2.0.0 || ^3.0.0 || ^4.0.0"
61 |   },
62 |   "engines": {
63 |     "node": ">18",
64 |     "pnpm": ">=7.9.5"
65 |   },
66 |   "packageManager": "pnpm@10.8.1",
67 |   "dependencies": {
68 |     "ultrahtml": "1.5.3"
69 |   },
70 |   "publishConfig": {
71 |     "provenance": true
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/assets/astro-full-logo-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="2712" height="894" viewBox="0 0 2712 894" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M445.433 22.9832C452.722 32.0324 456.439 44.2432 463.873 68.6647L626.281 602.176C566.234 571.026 500.957 548.56 432.115 536.439L326.371 179.099C324.641 173.252 319.27 169.241 313.173 169.241C307.06 169.241 301.68 173.273 299.963 179.14L195.5 536.259C126.338 548.325 60.7632 570.832 0.459473 602.095L163.664 68.5412C171.121 44.1617 174.85 31.9718 182.14 22.9393C188.575 14.9651 196.946 8.77213 206.454 4.95048C217.224 0.621582 229.971 0.621582 255.466 0.621582H372.034C397.562 0.621582 410.326 0.621582 421.106 4.95951C430.622 8.78908 438.998 14.9946 445.433 22.9832Z" fill="black"/>
 3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M464.867 627.566C438.094 650.46 384.655 666.073 323.101 666.073C247.551 666.073 184.229 642.553 167.426 610.921C161.419 629.05 160.072 649.798 160.072 663.052C160.072 663.052 156.114 728.134 201.38 773.401C201.38 749.896 220.435 730.842 243.939 730.842C284.226 730.842 284.181 765.99 284.144 794.506C284.143 795.36 284.142 796.209 284.142 797.051C284.142 840.333 310.595 877.436 348.215 893.075C342.596 881.518 339.444 868.54 339.444 854.825C339.444 813.545 363.679 798.175 391.845 780.311C414.255 766.098 439.155 750.307 456.315 718.629C465.268 702.101 470.352 683.17 470.352 663.052C470.352 650.68 468.43 638.757 464.867 627.566Z" fill="#FF5D01"/>
 4 | <path d="M999.148 593.833C1067.08 593.833 1118.03 569.665 1138.93 528.516C1138.93 548.111 1140.23 568.36 1143.5 584.036H1255.19C1249.97 561.173 1247.36 529.82 1247.36 488.671V388.081C1247.36 292.717 1191.18 247.648 1066.43 247.648C957.344 247.648 884.188 292.717 875.697 366.527H991.963C995.882 334.521 1022.66 316.885 1066.43 316.885C1109.53 316.885 1133.7 334.521 1133.7 371.1V380.896L1015.48 391.347C957.997 397.227 925.338 407.023 902.477 422.7C878.31 439.028 865.899 463.851 865.899 494.549C865.899 555.948 916.847 593.833 999.148 593.833ZM1042.26 525.902C1004.37 525.902 981.512 510.88 981.512 486.712C981.512 461.892 1000.45 448.827 1048.14 442.949L1135.66 433.805V453.4C1135.66 497.163 1097.78 525.902 1042.26 525.902Z" fill="black"/>
 5 | <path d="M1490.77 593.833C1604.43 593.833 1662.56 551.377 1662.56 482.793C1662.56 425.966 1629.9 394.613 1550.87 384.162L1452.23 373.059C1424.15 369.138 1412.39 361.953 1412.39 346.277C1412.39 327.336 1431.33 318.844 1474.44 318.844C1533.88 318.844 1575.03 332.561 1608.35 359.342L1661.25 306.434C1624.67 268.55 1561.32 247.648 1482.94 247.648C1372.55 247.648 1311.15 286.838 1311.15 352.809C1311.15 410.289 1349.03 442.295 1427.41 452.745L1516.25 463.196C1551.52 467.769 1561.97 474.302 1561.97 491.283C1561.97 510.88 1542.37 521.331 1496.65 521.331C1428.72 521.331 1383 503.041 1352.3 469.076L1292.21 518.717C1332.05 568.36 1399.98 593.833 1490.77 593.833Z" fill="black"/>
 6 | <path d="M1754.78 331.255V469.076C1754.78 550.07 1800.5 591.221 1898.48 591.221C1928.53 591.221 1952.04 587.955 1974.25 581.423V496.508C1962.49 499.122 1948.12 501.734 1929.18 501.734C1888.03 501.734 1867.78 483.446 1867.78 444.908V331.255H1974.9V257.445H1867.78V137.914L1754.78 179.717V257.445H1681.62V331.255H1754.78Z" fill="black"/>
 7 | <path d="M2137.13 257.445H2033.93V584.036H2146.93V461.892C2146.93 426.618 2154.77 394.613 2176.33 374.364C2193.31 358.687 2217.48 350.198 2251.44 350.198C2263.85 350.198 2273.65 351.502 2284.75 352.809V250.26C2277.57 248.954 2272.34 248.954 2263.2 248.954C2198.53 248.954 2154.77 286.185 2137.13 346.932V257.445Z" fill="black"/>
 8 | <path d="M2508.05 593.833C2627.59 593.833 2711.85 530.475 2711.85 420.088C2711.85 310.353 2627.59 247.648 2508.05 247.648C2387.87 247.648 2303.61 310.353 2303.61 420.088C2303.61 530.475 2387.87 593.833 2508.05 593.833ZM2508.05 518.717C2453.19 518.717 2418.57 483.446 2418.57 420.088C2418.57 356.728 2453.19 322.763 2508.05 322.763C2562.27 322.763 2596.89 356.728 2596.89 420.088C2596.89 483.446 2562.27 518.717 2508.05 518.717Z" fill="black"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/components/Story.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Code } from "astro/components";
 3 | 
 4 | type Props = {
 5 |   title: string;
 6 |   /** Provide a code example for the story */
 7 |   source: string;
 8 | };
 9 | 
10 | const { title, source } = Astro.props as Props;
11 | ---
12 | 
13 | <div class="Story">
14 |   <p>
15 |     {title}:
16 |   </p>
17 | 
18 |   <div class="Story_codeWrapper" style="margin-block-end: 2rem;">
19 |     {source ? <Code code={source} lang="astro" /> : null}
20 |   </div>
21 | 
22 |   <div>
23 |     <slot />
24 |   </div>
25 | </div>
26 | 
27 | <style>
28 |   .Story {
29 |     max-width: 100%;
30 |   }
31 | 
32 |   .Story_codeWrapper {
33 |     display: flex;
34 |     align-items: center;
35 |     justify-content: center;
36 |   }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/components/Svg/Svg.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type { SVGAttributes } from "../../types";
 3 | import { overrideSvgAttributes } from "./overrideSvgAttributes";
 4 | 
 5 | // accepts SVG attributes which will override the ones in the original SVG
 6 | export interface Props extends SVGAttributes {
 7 |   /**  pass an `import("*.svg?raw")` to `Svg` for the svg file to use */
 8 |   src: Promise<typeof import("*.svg?raw")>;
 9 | }
10 | 
11 | const { src, ...attributeOverrides } = Astro.props as Props;
12 | 
13 | const SVG_NOT_FOUND = "Could not find an SVG at the provided `src`";
14 | const ALT_NOT_ALLOWED =
15 |   "`alt` is not a valid prop for svg, perhaps you mean `aria-label` or `aria-hidden`?";
16 | 
17 | const svgImport = await src;
18 | 
19 | if (!svgImport) {
20 |   throw new Error(SVG_NOT_FOUND);
21 | }
22 | 
23 | const svgSource = svgImport.default;
24 | 
25 | if (!svgSource) {
26 |   throw new Error(SVG_NOT_FOUND);
27 | }
28 | 
29 | if ("alt" in attributeOverrides) {
30 |   throw new Error(ALT_NOT_ALLOWED);
31 | }
32 | 
33 | if (!svgSource.trimStart().toLowerCase().startsWith("<svg")) {
34 |   throw new Error(`${SVG_NOT_FOUND}, provided: ${svgSource.slice(0, 23)}
35 |   maybe you need to add '?raw' to the end of the import?`);
36 | }
37 | 
38 | const contents = overrideSvgAttributes(svgSource, attributeOverrides);
39 | ---
40 | 
41 | <Fragment set:html={contents} />
42 | 


--------------------------------------------------------------------------------
/src/components/Svg/overrideSvgAttributes.bench.ts:
--------------------------------------------------------------------------------
  1 | import type { SVGAttributes } from "../../types.js";
  2 | import { overrideSvgAttributes } from "./overrideSvgAttributes.js";
  3 | import fc from "fast-check";
  4 | import { parse } from "ultrahtml";
  5 | import { bench, describe, expect } from "vitest";
  6 | 
  7 | const svgArbitrary = fc
  8 |   .record({
  9 |     start: fc.mixedCase(fc.constantFrom("<svg>")),
 10 |     middle: fc.string({ unit: "grapheme-composite" }),
 11 |     end: fc.mixedCase(fc.constantFrom("</svg>")),
 12 |   })
 13 |   .map(({ start, middle, end }) => `${start}${middle}${end}`);
 14 | 
 15 | const SVGAttributesArbitrary = fc.record<SVGAttributes>({
 16 |   height: fc.option(fc.integer()),
 17 |   width: fc.option(fc.integer()),
 18 |   "aria-hidden": fc.option(fc.boolean()),
 19 |   "aria-label": fc.option(fc.string()),
 20 |   viewBox: fc.option(fc.string()),
 21 |   fill: fc.option(fc.string()),
 22 |   xmlns: fc.option(fc.string()),
 23 | });
 24 | 
 25 | describe("overrideSvgAtrributes", () => {
 26 |   bench("should return the same output if no overrides are given", async () => {
 27 |     expect(await overrideSvgAttributes("<svg></svg>")).toBe("<svg></svg>");
 28 |     expect(await overrideSvgAttributes("<svg>")).toBe("<svg></svg>");
 29 |     expect(await overrideSvgAttributes("<SVG>")).toBe("<SVG></SVG>");
 30 |   });
 31 | 
 32 |   bench("should strip leading and following whitespace", async () => {
 33 |     expect(await overrideSvgAttributes("  <svg>")).toBe("<svg></svg>");
 34 |     expect(await overrideSvgAttributes("  <svg></svg>   ")).toBe("<svg></svg>");
 35 |     expect(await overrideSvgAttributes("    <svg></svg>")).toBe("<svg></svg>");
 36 |   });
 37 | 
 38 |   bench("should override height and width", async () => {
 39 |     expect(
 40 |       await overrideSvgAttributes(`<svg height="100" width=40></svg>`, {
 41 |         height: 400,
 42 |         width: 20,
 43 |       }),
 44 |     ).toBe('<svg height="400" width="20"></svg>');
 45 |   });
 46 | 
 47 |   bench("should not include null and undefined properties", async () => {
 48 |     expect(
 49 |       await overrideSvgAttributes("<svg></svg>", {
 50 |         height: null,
 51 |         width: undefined,
 52 |       }),
 53 |     ).toBe("<svg></svg>");
 54 |     expect(
 55 |       await overrideSvgAttributes(
 56 |         `<svg height="100" width=200 aria-hidden="true"></svg>`,
 57 |         {
 58 |           height: null,
 59 |           width: undefined,
 60 |         },
 61 |       ),
 62 |     ).toBe(`<svg aria-hidden="true"></svg>`);
 63 |   });
 64 | 
 65 |   bench("should throw an error if `svgSource` is empty", async () => {
 66 |     await expect(
 67 |       async () => await overrideSvgAttributes(""),
 68 |     ).rejects.toThrowErrorMatchingInlineSnapshot(
 69 |       '"`svgSource` must have content"',
 70 |     );
 71 |   });
 72 | 
 73 |   bench(
 74 |     "should throw an error if svgSource doesn't start with `<svg`",
 75 |     async () => {
 76 |       await expect(
 77 |         async () => await overrideSvgAttributes("<div></div>"),
 78 |       ).rejects.toThrowErrorMatchingInlineSnapshot(
 79 |         '"`svgSource` must begin with `<svg`"',
 80 |       );
 81 |       await expect(
 82 |         async () => await overrideSvgAttributes("/images/www/hero.svg"),
 83 |       ).rejects.toThrowErrorMatchingInlineSnapshot(
 84 |         '"`svgSource` must begin with `<svg`"',
 85 |       );
 86 |     },
 87 |   );
 88 | 
 89 |   bench("should add properties successfully", async () => {
 90 |     expect(
 91 |       await overrideSvgAttributes("<SVG></SVG>", {
 92 |         height: null,
 93 |         width: null,
 94 |         "aria-hidden": true,
 95 |         "aria-label": null,
 96 |         viewBox: "0 0 2712 894",
 97 |       }),
 98 |     ).toBe('<SVG aria-hidden="true" viewBox="0 0 2712 894"></SVG>');
 99 | 
100 |     await fc.assert(
101 |       fc.asyncProperty(
102 |         svgArbitrary,
103 |         SVGAttributesArbitrary,
104 |         fc.context(),
105 |         async (svgSource, overrides, ctx) => {
106 |           ctx.log(svgSource);
107 |           const transformedSource = await overrideSvgAttributes(
108 |             svgSource,
109 |             overrides,
110 |           );
111 |           ctx.log(transformedSource);
112 |           expect(transformedSource).toBeTruthy();
113 |           // every truthy override should exist in the transformed source
114 |           Object.entries(overrides)
115 |             .filter(([, value]) => {
116 |               ctx.log(`${value}, ${!!value}`);
117 |               return !!value;
118 |             })
119 |             .forEach(([override]) => {
120 |               expect(transformedSource).toContain(override);
121 |             });
122 |         },
123 |       ),
124 |     );
125 |   });
126 | });
127 | 
128 | describe("parse()", () => {
129 |   bench("should never throw", async () => {
130 |     await fc.assert(
131 |       fc.asyncProperty(
132 |         fc.string({ unit: "grapheme-composite" }),
133 |         async (input) => {
134 |           expect(await parse(input)).toBeTruthy();
135 |         },
136 |       ),
137 |     );
138 |   });
139 | });
140 | 


--------------------------------------------------------------------------------
/src/components/Svg/overrideSvgAttributes.test.ts:
--------------------------------------------------------------------------------
  1 | import type { SVGAttributes } from "../../types.js";
  2 | import { overrideSvgAttributes } from "./overrideSvgAttributes.js";
  3 | import fc from "fast-check";
  4 | import { parse } from "ultrahtml";
  5 | import { describe, expect, it } from "vitest";
  6 | 
  7 | const whitespaceArb = fc.string({ unit: fc.constant(" ") });
  8 | 
  9 | const svgArbitrary = fc
 10 |   .record({
 11 |     start: fc
 12 |       .record({
 13 |         preWhitespace: whitespaceArb,
 14 |         svg: fc.mixedCase(fc.constant("<svg>")),
 15 |         postWhitespace: whitespaceArb,
 16 |       })
 17 |       .map(
 18 |         ({ preWhitespace, svg, postWhitespace }) =>
 19 |           `${preWhitespace}${svg}${postWhitespace}`,
 20 |       ),
 21 |     middle: fc.string({ unit: "grapheme-composite" }),
 22 |     end: fc
 23 |       .record({
 24 |         preWhitespace: whitespaceArb,
 25 |         svg: fc.mixedCase(fc.constant("</svg>")),
 26 |         postWhitespace: whitespaceArb,
 27 |       })
 28 |       .map(
 29 |         ({ preWhitespace, svg, postWhitespace }) =>
 30 |           `${preWhitespace}${svg}${postWhitespace}`,
 31 |       ),
 32 |   })
 33 |   .map(({ start, middle, end }) => `${start}${middle}${end}`);
 34 | 
 35 | const SVGAttributesArbitrary = fc.record<SVGAttributes>({
 36 |   height: fc.option(fc.integer()),
 37 |   width: fc.option(fc.integer()),
 38 |   "aria-hidden": fc.option(fc.boolean()),
 39 |   "aria-label": fc.option(fc.string()),
 40 |   viewBox: fc.option(fc.string()),
 41 |   fill: fc.option(fc.string()),
 42 |   xmlns: fc.option(fc.string()),
 43 | });
 44 | 
 45 | describe("overrideSvgAtrributes", () => {
 46 |   it("should return the same output if no overrides are given", async () => {
 47 |     expect(await overrideSvgAttributes("<svg></svg>")).toBe("<svg></svg>");
 48 |     expect(await overrideSvgAttributes("<svg>")).toBe("<svg></svg>");
 49 |     expect(await overrideSvgAttributes("<SVG>")).toBe("<SVG></SVG>");
 50 |   });
 51 | 
 52 |   it("should strip leading and following whitespace", async () => {
 53 |     expect(await overrideSvgAttributes("  <svg>")).toBe("<svg></svg>");
 54 |     expect(await overrideSvgAttributes("  <svg></svg>   ")).toBe("<svg></svg>");
 55 |     expect(await overrideSvgAttributes("    <svg></svg>")).toBe("<svg></svg>");
 56 |   });
 57 | 
 58 |   it("should override height and width", async () => {
 59 |     expect(
 60 |       await overrideSvgAttributes(`<svg height="100" width=40></svg>`, {
 61 |         height: 400,
 62 |         width: 20,
 63 |       }),
 64 |     ).toBe('<svg height="400" width="20"></svg>');
 65 |   });
 66 | 
 67 |   it("should not include null and undefined properties", async () => {
 68 |     expect(
 69 |       await overrideSvgAttributes("<svg></svg>", {
 70 |         height: null,
 71 |         width: undefined,
 72 |       }),
 73 |     ).toBe("<svg></svg>");
 74 |     expect(
 75 |       await overrideSvgAttributes(
 76 |         `<svg height="100" width=200 aria-hidden="true"></svg>`,
 77 |         {
 78 |           height: null,
 79 |           width: undefined,
 80 |         },
 81 |       ),
 82 |     ).toBe(`<svg aria-hidden="true"></svg>`);
 83 |   });
 84 | 
 85 |   it("should throw an error if `svgSource` is empty", async () => {
 86 |     await expect(
 87 |       async () => await overrideSvgAttributes(""),
 88 |     ).rejects.toThrowErrorMatchingInlineSnapshot(
 89 |       `[Error: \`svgSource\` must have content]`,
 90 |     );
 91 |   });
 92 | 
 93 |   it("should throw an error if svgSource doesn't start with `<svg`", async () => {
 94 |     await expect(
 95 |       async () => await overrideSvgAttributes("<div></div>"),
 96 |     ).rejects.toThrowErrorMatchingInlineSnapshot(
 97 |       `[Error: \`svgSource\` must begin with \`<svg\`]`,
 98 |     );
 99 |     await expect(
100 |       async () => await overrideSvgAttributes("/images/www/hero.svg"),
101 |     ).rejects.toThrowErrorMatchingInlineSnapshot(
102 |       `[Error: \`svgSource\` must begin with \`<svg\`]`,
103 |     );
104 |   });
105 | 
106 |   it("should add properties successfully", async () => {
107 |     expect(
108 |       await overrideSvgAttributes("<SVG></SVG>", {
109 |         height: null,
110 |         width: null,
111 |         "aria-hidden": true,
112 |         "aria-label": null,
113 |         viewBox: "0 0 2712 894",
114 |       }),
115 |     ).toBe('<SVG aria-hidden="true" viewBox="0 0 2712 894"></SVG>');
116 | 
117 |     await fc.assert(
118 |       fc.asyncProperty(
119 |         svgArbitrary,
120 |         SVGAttributesArbitrary,
121 |         fc.context(),
122 |         async (svgSource, overrides, ctx) => {
123 |           ctx.log(svgSource);
124 |           const transformedSource = await overrideSvgAttributes(
125 |             svgSource,
126 |             overrides,
127 |           );
128 |           ctx.log(transformedSource);
129 |           expect(transformedSource).toBeTruthy();
130 |           // every truthy override should exist in the transformed source
131 |           Object.entries(overrides)
132 |             .filter(([, value]) => {
133 |               ctx.log(`${value}, ${!!value}`);
134 |               return !!value;
135 |             })
136 |             .forEach(([override]) => {
137 |               expect(transformedSource).toContain(override);
138 |             });
139 |         },
140 |       ),
141 |     );
142 |   });
143 | });
144 | 
145 | describe("parse()", () => {
146 |   it("should never throw", async () => {
147 |     await fc.assert(
148 |       fc.asyncProperty(
149 |         fc.string({ unit: "grapheme-composite" }),
150 |         async (input) => {
151 |           expect(await parse(input)).toBeTruthy();
152 |         },
153 |       ),
154 |     );
155 |   });
156 | });
157 | 


--------------------------------------------------------------------------------
/src/components/Svg/overrideSvgAttributes.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="astro/astro-jsx" />
 2 | 
 3 | import type { SVGAttributes } from "../../types";
 4 | import { type DocumentNode, type Node, parse, render } from "ultrahtml";
 5 | 
 6 | const EMPTY_STRING_ERR = "`svgSource` must have content";
 7 | const MUST_START_WITH_SVG = "`svgSource` must begin with `<svg`";
 8 | 
 9 | export async function overrideSvgAttributes(
10 |   svgSource: string,
11 |   attributeOverrides: SVGAttributes = {},
12 | ): Promise<string> {
13 |   if (!svgSource) {
14 |     throw new Error(EMPTY_STRING_ERR);
15 |   }
16 |   if (!svgSource.trimStart().toLowerCase().startsWith("<svg")) {
17 |     throw new Error(MUST_START_WITH_SVG);
18 |   }
19 | 
20 |   const doc = parse(svgSource) as DocumentNode;
21 | 
22 |   const firstSVGNode = doc.children.find(
23 |     ({ type, name }: Node) => type === 1 && /svg/i.test(name),
24 |   );
25 | 
26 |   const mergedAttributes = Object.fromEntries(
27 |     Object.entries({
28 |       ...firstSVGNode.attributes,
29 |       ...attributeOverrides,
30 |     }).filter(([, value]) => !!value),
31 |   );
32 | 
33 |   const updatedSVG = {
34 |     ...firstSVGNode,
35 |     attributes: mergedAttributes,
36 |   };
37 | 
38 |   return render(updatedSVG);
39 | }
40 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />
2 | /// <reference types="astro/client" />
3 | 


--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>@jasikpark/astro-svg-loader</title>
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <div id="app">
11 |       <slot />
12 |     </div>
13 | 
14 |     <style is:global>
15 |       *,
16 |       *::before,
17 |       *::after {
18 |         box-sizing: border-box;
19 |       }
20 | 
21 |       html,
22 |       body {
23 |         font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
24 |         background-color: #efefef;
25 |         width: 100%;
26 |         height: 100%;
27 |         padding: 0;
28 |         margin: 0;
29 |       }
30 | 
31 |       #app {
32 |         padding: 1rem;
33 |         text-align: center;
34 |       }
35 | 
36 |       iframe[data-why] {
37 |         display: inline-block;
38 |         border: none;
39 |         box-shadow:
40 |           2.7px 3.2px 3.6px rgba(0, 0, 0, 0.024),
41 |           7.5px 8.8px 10px rgba(0, 0, 0, 0.035),
42 |           18.1px 21.1px 24.1px rgba(0, 0, 0, 0.046),
43 |           60px 70px 80px rgba(0, 0, 0, 0.07);
44 |         border-radius: 0.4rem;
45 |         width: 400px;
46 |         min-height: 200px;
47 |         max-height: 400px;
48 |         background-color: white;
49 |         margin: 0.5rem;
50 |       }
51 | 
52 |       .sr-only {
53 |         border: 0 !important;
54 |         clip: rect(1px, 1px, 1px, 1px) !important;
55 |         -webkit-clip-path: inset(50%) !important;
56 |         clip-path: inset(50%) !important;
57 |         height: 1px !important;
58 |         overflow: hidden !important;
59 |         margin: -1px !important;
60 |         padding: 0 !important;
61 |         position: absolute !important;
62 |         width: 1px !important;
63 |         white-space: nowrap !important;
64 |       }
65 |     </style>
66 |   </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import README from "../../README.md";
 3 | import Story from "../components/Story.astro";
 4 | import Svg from "../components/Svg/Svg.astro";
 5 | import Layout from "../layouts/Layout.astro";
 6 | ---
 7 | 
 8 | <Layout title="Astro">
 9 |   <h1>Astro SVG Loader</h1>
10 | 
11 |   <div
12 |     style="text-align: left; max-width: 80ch; margin-inline: auto; margin-block-end: 2rem;"
13 |   >
14 |     <README />
15 |   </div>
16 | 
17 |   <Story
18 |     title="Svg / Override height and width"
19 |     source={`---
20 | import Svg from "@jasikpark/astro-svg-loader";
21 | ---
22 | 
23 | <Svg
24 |   height="200"
25 |   width="1242"
26 |   src={import("../assets/astro-full-logo-light.svg?raw")}
27 | />`}
28 |   >
29 |     <Svg
30 |       height="200"
31 |       width="1242"
32 |       src={import("../assets/astro-full-logo-light.svg?raw")}
33 |     />
34 |   </Story>
35 | 
36 |   <Story
37 |     title="Svg / Add accessible label & aria-hide the svg"
38 |     source={`---
39 | import Svg from "@jasikpark/astro-svg-loader";
40 | ---
41 | 
42 | <div>
43 |   <span class="sr-only">Astro</span>
44 |   <Svg
45 |     aria-hidden={true}
46 |     height="200"
47 |     width="1242"
48 |     src={import("../assets/astro-full-logo-light.svg?raw")}
49 |   />
50 | </div>`}
51 |   >
52 |     <div>
53 |       <span class="sr-only">Astro</span>
54 |       <Svg
55 |         aria-hidden={true}
56 |         height="200"
57 |         width="1242"
58 |         src={import("../assets/astro-full-logo-light.svg?raw")}
59 |       />
60 |     </div>
61 |   </Story>
62 | 
63 |   <Story
64 |     title="Svg / Add an aria-label"
65 |     source={`---
66 | import Svg from "@jasikpark/astro-svg-loader";
67 | ---
68 | 
69 | <Svg
70 |   aria-label="Astro"
71 |   height="200"
72 |   width="1242"
73 |   src={import("../assets/astro-full-logo-light.svg?raw")}
74 | />`}
75 |   >
76 |     <aside style="margin-block-end: 1rem;">
77 |       We recommend the above pattern over <code>aria-label</code> for screenreader
78 |       support reasons
79 |     </aside>
80 |     <Svg
81 |       aria-label="Astro"
82 |       height="200"
83 |       width="1242"
84 |       src={import("../assets/astro-full-logo-light.svg?raw")}
85 |     />
86 |   </Story>
87 | </Layout>
88 | 
89 | <style>
90 |   :global(pre) {
91 |     text-align: left;
92 |     padding: 2rem;
93 |     border-radius: 2rem;
94 |     max-width: 80ch;
95 |   }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | export type SVGAttributes = Omit<
2 |   astroHTML.JSX.SVGAttributes,
3 |   "client:list" | "set:text" | "set:html" | "is:raw"
4 | >;
5 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strictest",
3 |   "compilerOptions": {
4 |     "jsx": "react-jsx",
5 |     "skipLibCheck": true,
6 |     "baseUrl": "."
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------