ctx-core@ctx-core/svg-ui-svelte
Middleware, component, & utility functions for svg.
Install
npm i @ctx-core/svg-ui-svelteSvelte + Sapper Component
@ctx-core/svg-ui-svelte has svg_preprocess_, which instantiates a rollup preprocess object.
// rollup.config.js
import { proprocess_ } from '@ctx-core/svelte/node/node'
import { svg_preprocess_ } from '@ctx-core/svg-ui-svelte'
const svg_preprocess = svg_preprocess_()
const preprocess = proprocess_([
svg_preprocess,
// ...
])
export default {
client: {
//...
plugins: [
// ...
svelte({
// ...
extensions: ['.svelte', '.html', '.svg'],
preprocess,
}),
// ...
],
// ...
},
server: {
//...
plugins: [
// ...
svelte({
// ...
extensions: ['.svelte', '.html', '.svg'],
preprocess,
}),
// ...
],
// ...
},
serviceworker: {
// ...
},
}Svg files can then be imported with optional attributes to be added to the <svg> tag.
Note that existing svg attributes in the source file will be the default values.
<script>
import My_Icon from './path/to/my-icon.svg'
</script>
<My_Icon fill="red"></My_Icon>How does this work?
The @ctx-core/svg-ui-svelte preprocessor runs as a preprocess hook in rollup-plugin-svelte.
An imported svg file:
<svg viewBox="0 0 512 512" width="512" height="512">
<path d="M480 288c0-80.25-49.28-148.92-119.19-177.62L320 192V80a16 16 0 0 0-16-16h-96a16 16 0 0 0-16 16v112l-40.81-81.62C81.28 139.08 32 207.75 32 288v64h448zm16 96H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h480a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/>
</svg>Is preprocessed to a svelte component:
<script context="module">
export async function preload({ params, query }) {
return Object.assign({}, query, params)
}
</script>
<script>
let svg_node
$: {
Object.keys($$props).forEach(
prop => svg_node?.setAttribute(prop, $$props[prop]))
}
</script>
<svelte:options namespace="svg"></svelte:options>
<svg bind:this={svg_node} ${attribs_txt}><!--...--></svg>Middleware
@ctx-core/svg-ui-svelte middleware is an express middleware that responds with the svg file,
applying optional url query attributes to the <svg> tag.
Sapper route
The following route, GET /icons/[name].svg,
will respond with a svg file in the src/routes/icons directory.
GET /icons/[name].svg?fill=blue will set the fill=blue attributes on the <svg> tag.
// src/routes/icons/[name].svg.js
import { svg_get_ } from '@ctx-core/svg'
export const get = svg_get_({ dir: 'src/routes/icons' })