https://github.com/mrfoxpro/astro-svg-components
https://github.com/mrfoxpro/astro-svg-components
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/mrfoxpro/astro-svg-components
- Owner: MrFoxPro
- Created: 2022-10-26T08:17:20.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-10-30T17:45:27.000Z (over 3 years ago)
- Last Synced: 2025-02-06T19:41:54.166Z (over 1 year ago)
- Language: TypeScript
- Size: 56.6 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Import SVG files as astro components
Install:
`pnpm i -D @foxpro/astro-svg-components`
Config:
```js
import astroSvgComnponents from '@foxpro/astro-svg-components'
export default defineConfig({
integrations: [astroSvgComnponents()],
// optional! alias
vite: {
resolve: {
alias: [
{
find: '@',
replacement: path.resolve('.'),
},
],
},
},
})
```
Astro file:
```jsx
---
import CircleIcon from '@/svgs/circle.svg?component-astro'
const icons = import.meta.glob('@/svgs/*.svg', { as: 'component-astro', eager: true })
import { globSVG } from '@foxpro/astro-svg-components'
const icons = globSVG('@/svgs/*.svg')
---
// Props are passed to element
{icons.map((Icon) => )}
```
tsconfig:
```json
{
"compilerOptions": {
"types": ["@foxpro/astro-svg-components/types"]
}
}
```