0.1.3 • Published 2 years ago
@foxpro/astro-svg-components v0.1.3
Import SVG files as astro components
Install:
pnpm i -D @foxpro/astro-svg-components
Config:
import astroSvgComnponents from '@foxpro/astro-svg-components'
export default defineConfig({
integrations: [astroSvgComnponents()],
// optional! alias
vite: {
resolve: {
alias: [
{
find: '@',
replacement: path.resolve('.'),
},
],
},
},
})
Astro file:
---
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 <svg> element
<CircleIcon class="icon">
{icons.map((Icon) => <Icon class="icon" />)}
tsconfig:
{
"compilerOptions": {
"types": ["@foxpro/astro-svg-components/types"]
}
}