npm: package manager

    @ctx-core/svg-ui-svelte
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.28 • Public • Published

    @ctx-core/svg-ui-svelte

    Middleware, component, & utility functions for svg.

    Install

    npm i @ctx-core/svg-ui-svelte

    Svelte + 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' })

    Keywords

    Install

    npm i @ctx-core/svg-ui-svelte

    DownloadsWeekly Downloads

    381

    Version

    1.2.28

    License

    Apache-2.0

    Unpacked Size

    21 kB

    Total Files

    18

    Last publish

    Collaborators

    • btakita