https://github.com/ctx-core/svg-ui-svelte

https://github.com/ctx-core/svg-ui-svelte

Last synced: 30 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ctx-core/svg-ui-svelte
• Owner: ctx-core
• Created: 2021-12-15T04:29:23.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-12T22:17:29.000Z (9 months ago)
• Last Synced: 2024-04-13T07:46:01.232Z (9 months ago)
• Language: JavaScript
• Size: 382 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# @ctx-core/svg-ui-svelte

Middleware, component, & utility functions for svg.

## Install

```shell

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

```

## Svelte + Sapper Component

`@ctx-core/svg-ui-svelte` has `svg_preprocess_`, which instantiates a rollup preprocess object.

```javascript

// 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 `` tag.

Note that existing svg attributes in the source file will be the default values.

```html

	import My_Icon from './path/to/my-icon.svg'

```

### 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

  

```

Is preprocessed to a svelte component:

```html

	export async function preload({ params, query }) {

	  return Object.assign({}, query, params)

	}

	let svg_node

	$: {

		Object.keys($$props).forEach(

			prop => svg_node?.setAttribute(prop, $$props[prop]))

	}

```

## Middleware

`@ctx-core/svg-ui-svelte` middleware is an express middleware that responds with the svg file,

	applying optional url query attributes to the `` 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 `` tag.

```javascript

// src/routes/icons/[name].svg.js

import { svg_get_ } from '@ctx-core/svg'

export const get = svg_get_({ dir: 'src/routes/icons' })

```