1.3.256 • Published 10 months ago

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

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
10 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

10 months ago

1.3.255

10 months ago

1.3.253

10 months ago

1.3.251

11 months ago

1.3.250

11 months 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

12 months ago

1.3.233

1 year ago

1.3.232

1 year ago

1.3.231

1 year ago

1.3.238

12 months ago

1.3.237

12 months ago

1.3.236

12 months ago

1.3.235

12 months ago

1.3.230

1 year ago

1.3.239

12 months ago

1.3.245

12 months ago

1.3.244

12 months ago

1.3.242

12 months ago

1.3.249

11 months ago

1.3.248

11 months ago

1.3.247

12 months ago

1.3.246

12 months ago

1.3.240

12 months 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

1 year ago

1.3.129

1 year ago

1.3.133

1 year ago

1.3.132

1 year ago

1.3.131

1 year ago

1.3.130

1 year ago

1.3.128

1 year ago

1.3.124

1 year ago

1.3.127

1 year ago

1.3.126

1 year ago

1.3.123

1 year ago

1.3.122

1 year ago

1.3.121

1 year ago

1.3.117

1 year ago

1.3.119

1 year ago

1.3.118

1 year ago

1.3.120

1 year ago

1.3.116

1 year ago

1.3.115

1 year ago

1.3.114

1 year ago

1.3.112

1 year ago

1.3.111

1 year ago

1.3.110

1 year ago

1.3.102

1 year ago

1.3.101

1 year ago

1.3.100

1 year ago

1.3.106

1 year ago

1.3.105

1 year ago

1.3.104

1 year ago

1.3.103

1 year ago

1.3.109

1 year ago

1.3.108

1 year ago

1.3.107

1 year ago

1.3.97

1 year ago

1.3.98

1 year ago

1.3.99

1 year ago

1.3.96

1 year ago

1.3.94

1 year ago

1.3.95

1 year ago

1.3.93

1 year ago

1.3.91

1 year ago

1.3.92

1 year ago

1.3.90

1 year ago

1.3.87

1 year ago

1.3.88

1 year ago

1.3.86

1 year ago

1.3.83

1 year ago

1.3.84

1 year ago

1.3.85

1 year ago

1.3.82

1 year ago

1.3.78

1 year ago

1.3.80

1 year ago

1.3.68

1 year ago

1.3.66

1 year ago

1.3.72

1 year ago

1.3.70

1 year ago

1.3.76

1 year ago

1.3.74

1 year ago

1.3.60

1 year ago

1.3.61

1 year ago

1.3.64

1 year 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

2 years ago

1.2.13

2 years ago

1.2.16

2 years ago

1.2.17

2 years ago

1.2.14

2 years ago

1.2.15

2 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

2 years ago

1.2.19

2 years ago

1.2.20

2 years ago

1.2.23

2 years ago

1.2.24

2 years ago

1.2.21

2 years ago

1.2.22

2 years ago

1.2.27

2 years ago

1.2.28

2 years ago

1.2.25

2 years ago

1.2.26

2 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

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

4 years ago