1.3.256 • Published 11 months ago

@ctx-core/svg-ui-svelte v1.3.256

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
11 months ago

@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' })
ctx-coresvg
ctx-coredom-serializerdomhandlerhtmlparser2
@infinitebrahmanuniverse/nolb-_ct@everything-registry/sub-chunk-208@ctx-core/fontawesome@ctx-core/fontawesome-ui-svelte@ctx-core/socicon
1.3.256

11 months ago

1.3.255

11 months ago

1.3.253

12 months ago

1.3.251

1 year ago

1.3.250

1 year ago

1.3.223

1 year ago

1.3.227

1 year ago

1.3.226

1 year ago

1.3.225

1 year ago

1.3.224

1 year ago

1.3.229

1 year ago

1.3.228

1 year ago

1.3.234

1 year ago

1.3.233

1 year ago

1.3.232

1 year ago

1.3.231

1 year ago

1.3.238

1 year ago

1.3.237

1 year ago

1.3.236

1 year ago

1.3.235

1 year ago

1.3.230

1 year ago

1.3.239

1 year ago

1.3.245

1 year ago

1.3.244

1 year ago

1.3.242

1 year ago

1.3.249

1 year ago

1.3.248

1 year ago

1.3.247

1 year ago

1.3.246

1 year ago

1.3.240

1 year ago

1.3.222

1 year ago

1.3.220

1 year ago

1.3.219

1 year ago

1.3.217

1 year ago

1.3.216

1 year ago

1.3.213

1 year ago

1.3.212

1 year ago

1.3.209

1 year ago

1.3.211

1 year ago

1.3.210

1 year ago

1.3.208

1 year ago

1.3.207

1 year ago

1.3.206

1 year ago

1.3.205

1 year ago

1.3.204

1 year ago

1.3.203

1 year ago

1.3.202

1 year ago

1.3.201

1 year ago

1.3.200

1 year ago

1.3.199

1 year ago

1.3.198

1 year ago

1.3.197

1 year ago

1.3.196

1 year ago

1.3.195

1 year ago

1.3.193

1 year ago

1.3.192

1 year ago

1.3.191

1 year ago

1.3.190

1 year ago

1.3.189

1 year ago

1.3.188

1 year ago

1.3.187

1 year ago

1.3.186

1 year ago

1.3.185

1 year ago

1.3.182

1 year ago

1.3.183

1 year ago

1.3.181

1 year ago

1.3.179

1 year ago

1.3.180

1 year ago

1.3.178

1 year ago

1.3.176

1 year ago

1.3.175

1 year ago

1.3.174

1 year ago

1.3.173

1 year ago

1.3.172

1 year ago

1.3.171

1 year ago

1.3.170

1 year ago

1.3.167

1 year ago

1.3.165

1 year ago

1.3.169

1 year ago

1.3.164

1 year ago

1.3.163

1 year ago

1.3.160

1 year ago

1.3.162

1 year ago

1.3.159

1 year ago

1.3.158

1 year ago

1.3.157

1 year ago

1.3.156

1 year ago

1.3.155

1 year ago

1.3.154

1 year ago

1.3.153

1 year ago

1.3.152

1 year ago

1.3.151

1 year ago

1.3.150

1 year ago

1.3.149

1 year ago

1.3.148

1 year ago

1.3.146

1 year ago

1.3.145

1 year ago

1.3.144

1 year ago

1.3.147

1 year ago

1.3.139

1 year ago

1.3.138

1 year ago

1.3.137

1 year ago

1.3.136

1 year ago

1.3.143

1 year ago

1.3.142

1 year ago

1.3.141

1 year ago

1.3.140

1 year ago

1.3.135

1 year ago

1.3.134

2 years ago

1.3.129

2 years ago

1.3.133

2 years ago

1.3.132

2 years ago

1.3.131

2 years ago

1.3.130

2 years ago

1.3.128

2 years ago

1.3.124

2 years ago

1.3.127

2 years ago

1.3.126

2 years ago

1.3.123

2 years ago

1.3.122

2 years ago

1.3.121

2 years ago

1.3.117

2 years ago

1.3.119

2 years ago

1.3.118

2 years ago

1.3.120

2 years ago

1.3.116

2 years ago

1.3.115

2 years ago

1.3.114

2 years ago

1.3.112

2 years ago

1.3.111

2 years ago

1.3.110

2 years ago

1.3.102

2 years ago

1.3.101

2 years ago

1.3.100

2 years ago

1.3.106

2 years ago

1.3.105

2 years ago

1.3.104

2 years ago

1.3.103

2 years ago

1.3.109

2 years ago

1.3.108

2 years ago

1.3.107

2 years ago

1.3.97

2 years ago

1.3.98

2 years ago

1.3.99

2 years ago

1.3.96

2 years ago

1.3.94

2 years ago

1.3.95

2 years ago

1.3.93

2 years ago

1.3.91

2 years ago

1.3.92

2 years ago

1.3.90

2 years ago

1.3.87

2 years ago

1.3.88

2 years ago

1.3.86

2 years ago

1.3.83

2 years ago

1.3.84

2 years ago

1.3.85

2 years ago

1.3.82

2 years ago

1.3.78

2 years ago

1.3.80

2 years ago

1.3.68

2 years ago

1.3.66

2 years ago

1.3.72

2 years ago

1.3.70

2 years ago

1.3.76

2 years ago

1.3.74

2 years ago

1.3.60

2 years ago

1.3.61

2 years ago

1.3.64

2 years ago

1.3.58

2 years ago

1.3.54

2 years ago

1.3.57

2 years ago

1.3.55

2 years ago

1.3.56

2 years ago

1.3.53

2 years ago

1.3.50

2 years ago

1.3.51

2 years ago

1.3.52

2 years ago

1.3.47

2 years ago

1.3.48

2 years ago

1.3.49

2 years ago

1.3.46

2 years ago

1.3.44

2 years ago

1.3.45

2 years ago

1.3.43

2 years ago

1.3.42

2 years ago

1.3.41

2 years ago

1.3.32

2 years ago

1.3.35

2 years ago

1.3.36

2 years ago

1.3.33

2 years ago

1.3.34

2 years ago

1.3.39

2 years ago

1.3.37

2 years ago

1.3.38

2 years ago

1.3.40

2 years ago

1.3.31

2 years ago

1.3.30

2 years ago

1.3.29

2 years ago

1.2.167

2 years ago

1.2.166

2 years ago

1.2.169

2 years ago

1.2.168

2 years ago

1.2.161

2 years ago

1.2.160

2 years ago

1.2.163

2 years ago

1.2.162

2 years ago

1.2.164

2 years ago

1.3.13

2 years ago

1.3.11

2 years ago

1.3.12

2 years ago

1.3.18

2 years ago

1.3.15

2 years ago

1.3.19

2 years ago

1.3.20

2 years ago

1.3.21

2 years ago

1.3.24

2 years ago

1.3.25

2 years ago

1.3.23

2 years ago

1.3.28

2 years ago

1.3.26

2 years ago

1.3.27

2 years ago

1.3.7

2 years ago

1.3.6

2 years ago

1.3.5

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.3.9

2 years ago

1.3.8

2 years ago

1.2.178

2 years ago

1.2.177

2 years ago

1.2.179

2 years ago

1.2.170

2 years ago

1.2.172

2 years ago

1.2.171

2 years ago

1.2.174

2 years ago

1.2.173

2 years ago

1.2.176

2 years ago

1.2.175

2 years ago

1.2.189

2 years ago

1.2.188

2 years ago

1.2.181

2 years ago

1.2.180

2 years ago

1.2.183

2 years ago

1.2.182

2 years ago

1.2.185

2 years ago

1.2.184

2 years ago

1.2.187

2 years ago

1.2.186

2 years ago

1.2.191

2 years ago

1.2.190

2 years ago

1.2.158

2 years ago

1.2.157

2 years ago

1.2.156

2 years ago

1.2.155

2 years ago

1.2.150

2 years ago

1.2.152

2 years ago

1.2.151

2 years ago

1.2.154

2 years ago

1.2.153

2 years ago

1.2.134

2 years ago

1.2.133

2 years ago

1.2.135

2 years ago

1.2.138

2 years ago

1.2.137

2 years ago

1.2.139

2 years ago

1.2.130

2 years ago

1.2.132

2 years ago

1.2.131

2 years ago

1.2.145

2 years ago

1.2.144

2 years ago

1.2.147

2 years ago

1.2.149

2 years ago

1.2.148

2 years ago

1.2.141

2 years ago

1.2.140

2 years ago

1.2.143

2 years ago

1.2.142

2 years ago

1.2.99

2 years ago

1.2.101

2 years ago

1.2.100

2 years ago

1.2.103

2 years ago

1.2.102

2 years ago

1.2.104

2 years ago

1.2.107

2 years ago

1.2.106

2 years ago

1.2.112

2 years ago

1.2.111

2 years ago

1.2.114

2 years ago

1.2.113

2 years ago

1.2.116

2 years ago

1.2.115

2 years ago

1.2.118

2 years ago

1.2.117

2 years ago

1.2.110

2 years ago

1.2.109

2 years ago

1.2.108

2 years ago

1.2.123

2 years ago

1.2.122

2 years ago

1.2.125

2 years ago

1.2.124

2 years ago

1.2.127

2 years ago

1.2.126

2 years ago

1.2.129

2 years ago

1.2.128

2 years ago

1.2.121

2 years ago

1.2.119

2 years ago

1.2.81

2 years ago

1.2.82

2 years ago

1.2.80

2 years ago

1.2.85

2 years ago

1.2.86

2 years ago

1.2.83

2 years ago

1.2.84

2 years ago

1.2.89

2 years ago

1.2.87

2 years ago

1.2.88

2 years ago

1.2.92

2 years ago

1.2.93

2 years ago

1.2.90

2 years ago

1.2.91

2 years ago

1.2.96

2 years ago

1.2.97

2 years ago

1.2.94

2 years ago

1.2.95

2 years ago

1.2.98

2 years ago

1.2.75

2 years ago

1.2.78

2 years ago

1.2.79

2 years ago

1.2.76

2 years ago

1.2.77

2 years ago

1.2.60

2 years ago

1.2.63

2 years ago

1.2.64

2 years ago

1.2.61

2 years ago

1.2.62

2 years ago

1.2.67

2 years ago

1.2.68

2 years ago

1.2.65

2 years ago

1.2.66

2 years ago

1.2.69

2 years ago

1.2.70

2 years ago

1.2.71

2 years ago

1.2.74

2 years ago

1.2.72

2 years ago

1.2.73

2 years ago

1.2.56

2 years ago

1.2.57

2 years ago

1.2.54

2 years ago

1.2.55

2 years ago

1.2.58

2 years ago

1.2.59

2 years ago

1.2.49

2 years ago

1.2.52

2 years ago

1.2.53

2 years ago

1.2.50

2 years ago

1.2.51

2 years ago

1.2.12

3 years ago

1.2.13

3 years ago

1.2.16

3 years ago

1.2.17

3 years ago

1.2.14

3 years ago

1.2.15

3 years ago

1.2.41

2 years ago

1.2.42

2 years ago

1.2.40

2 years ago

1.2.45

2 years ago

1.2.46

2 years ago

1.2.43

2 years ago

1.2.44

2 years ago

1.2.47

2 years ago

1.2.48

2 years ago

1.2.18

3 years ago

1.2.19

3 years ago

1.2.20

3 years ago

1.2.23

3 years ago

1.2.24

3 years ago

1.2.21

3 years ago

1.2.22

3 years ago

1.2.27

3 years ago

1.2.28

3 years ago

1.2.25

3 years ago

1.2.26

3 years ago

1.2.29

2 years ago

1.2.30

2 years ago

1.2.31

2 years ago

1.2.34

2 years ago

1.2.35

2 years ago

1.2.32

2 years ago

1.2.33

2 years ago

1.2.38

2 years ago

1.2.39

2 years ago

1.2.36

2 years ago

1.2.37

2 years ago

1.2.8

3 years ago

1.2.7

3 years ago

1.2.10

3 years ago

1.2.11

3 years ago

1.2.9

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.0

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.1.39

3 years ago

1.1.41

3 years ago

1.1.40

3 years ago

1.1.38

3 years ago

1.1.30

3 years ago

1.1.34

3 years ago

1.1.33

3 years ago

1.1.32

3 years ago

1.1.31

3 years ago

1.1.37

3 years ago

1.1.36

3 years ago

1.1.35

3 years ago

1.1.29

3 years ago

1.1.28

3 years ago

1.1.23

3 years ago

1.1.22

3 years ago

1.1.21

3 years ago

1.1.27

3 years ago

1.1.26

3 years ago

1.1.25

3 years ago

1.1.24

3 years ago

1.1.19

3 years ago

1.1.20

3 years ago

1.1.18

3 years ago

1.1.17

3 years ago

1.1.16

3 years ago

1.1.15

3 years ago

1.1.14

3 years ago

1.1.13

3 years ago

1.1.12

3 years ago

1.1.10

4 years ago

1.1.9

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago