1.3.217 • Published 1 day ago

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

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 day 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.217

1 day ago

1.3.216

2 days ago

1.3.213

3 days ago

1.3.212

8 days ago

1.3.209

19 days ago

1.3.211

19 days ago

1.3.210

19 days ago

1.3.208

20 days ago

1.3.207

22 days ago

1.3.206

25 days ago

1.3.205

27 days ago

1.3.204

29 days ago

1.3.203

1 month ago

1.3.202

1 month ago

1.3.201

1 month ago

1.3.200

1 month ago

1.3.199

1 month ago

1.3.198

1 month ago

1.3.197

1 month ago

1.3.196

1 month ago

1.3.195

1 month ago

1.3.193

1 month ago

1.3.192

1 month ago

1.3.191

1 month ago

1.3.190

1 month ago

1.3.189

1 month ago

1.3.188

1 month ago

1.3.187

1 month ago

1.3.186

2 months ago

1.3.185

2 months ago

1.3.182

2 months ago

1.3.183

2 months ago

1.3.181

2 months ago

1.3.179

2 months ago

1.3.180

2 months ago

1.3.178

2 months ago

1.3.176

2 months ago

1.3.175

2 months ago

1.3.174

2 months ago

1.3.173

2 months ago

1.3.172

2 months ago

1.3.171

2 months ago

1.3.170

2 months ago

1.3.167

3 months ago

1.3.165

3 months ago

1.3.169

2 months ago

1.3.164

3 months ago

1.3.163

3 months ago

1.3.160

3 months ago

1.3.162

3 months ago

1.3.159

3 months ago

1.3.158

3 months ago

1.3.157

3 months ago

1.3.156

3 months ago

1.3.155

3 months ago

1.3.154

3 months ago

1.3.153

3 months ago

1.3.152

3 months ago

1.3.151

3 months ago

1.3.150

3 months ago

1.3.149

3 months ago

1.3.148

3 months ago

1.3.146

3 months ago

1.3.145

3 months ago

1.3.144

3 months ago

1.3.147

3 months ago

1.3.139

3 months ago

1.3.138

3 months ago

1.3.137

3 months ago

1.3.136

3 months ago

1.3.143

3 months ago

1.3.142

3 months ago

1.3.141

3 months ago

1.3.140

3 months ago

1.3.135

3 months ago

1.3.134

3 months ago

1.3.129

4 months ago

1.3.133

3 months ago

1.3.132

3 months ago

1.3.131

4 months ago

1.3.130

4 months ago

1.3.128

4 months ago

1.3.124

4 months ago

1.3.127

4 months ago

1.3.126

4 months ago

1.3.123

4 months ago

1.3.122

4 months ago

1.3.121

4 months ago

1.3.117

4 months ago

1.3.119

4 months ago

1.3.118

4 months ago

1.3.120

4 months ago

1.3.116

4 months ago

1.3.115

4 months ago

1.3.114

4 months ago

1.3.112

4 months ago

1.3.111

4 months ago

1.3.110

4 months ago

1.3.102

4 months ago

1.3.101

4 months ago

1.3.100

4 months ago

1.3.106

4 months ago

1.3.105

4 months ago

1.3.104

4 months ago

1.3.103

4 months ago

1.3.109

4 months ago

1.3.108

4 months ago

1.3.107

4 months ago

1.3.97

4 months ago

1.3.98

4 months ago

1.3.99

4 months ago

1.3.96

4 months ago

1.3.94

4 months ago

1.3.95

4 months ago

1.3.93

4 months ago

1.3.91

4 months ago

1.3.92

4 months ago

1.3.90

4 months ago

1.3.87

4 months ago

1.3.88

4 months ago

1.3.86

4 months ago

1.3.83

4 months ago

1.3.84

4 months ago

1.3.85

4 months ago

1.3.82

5 months ago

1.3.78

5 months ago

1.3.80

5 months ago

1.3.68

5 months ago

1.3.66

5 months ago

1.3.72

5 months ago

1.3.70

5 months ago

1.3.76

5 months ago

1.3.74

5 months ago

1.3.60

5 months ago

1.3.61

5 months ago

1.3.64

5 months ago

1.3.58

5 months ago

1.3.54

5 months ago

1.3.57

5 months ago

1.3.55

5 months ago

1.3.56

5 months ago

1.3.53

5 months ago

1.3.50

5 months ago

1.3.51

5 months ago

1.3.52

5 months ago

1.3.47

5 months ago

1.3.48

5 months ago

1.3.49

5 months ago

1.3.46

5 months ago

1.3.44

5 months ago

1.3.45

5 months ago

1.3.43

5 months ago

1.3.42

5 months ago

1.3.41

5 months ago

1.3.32

6 months ago

1.3.35

5 months ago

1.3.36

5 months ago

1.3.33

6 months ago

1.3.34

5 months ago

1.3.39

5 months ago

1.3.37

5 months ago

1.3.38

5 months ago

1.3.40

5 months ago

1.3.31

6 months ago

1.3.30

6 months ago

1.3.29

6 months ago

1.2.167

10 months ago

1.2.166

10 months ago

1.2.169

9 months ago

1.2.168

10 months ago

1.2.161

10 months ago

1.2.160

10 months ago

1.2.163

10 months ago

1.2.162

10 months ago

1.2.164

10 months ago

1.3.13

6 months ago

1.3.11

6 months ago

1.3.12

6 months ago

1.3.18

6 months ago

1.3.15

6 months ago

1.3.19

6 months ago

1.3.20

6 months ago

1.3.21

6 months ago

1.3.24

6 months ago

1.3.25

6 months ago

1.3.23

6 months ago

1.3.28

6 months ago

1.3.26

6 months ago

1.3.27

6 months ago

1.3.7

6 months ago

1.3.6

6 months ago

1.3.5

6 months ago

1.3.4

6 months ago

1.3.3

6 months ago

1.3.2

6 months ago

1.3.1

6 months ago

1.3.0

6 months ago

1.3.9

6 months ago

1.3.8

6 months ago

1.2.178

8 months ago

1.2.177

8 months ago

1.2.179

8 months ago

1.2.170

9 months ago

1.2.172

9 months ago

1.2.171

9 months ago

1.2.174

8 months ago

1.2.173

8 months ago

1.2.176

8 months ago

1.2.175

8 months ago

1.2.189

6 months ago

1.2.188

6 months ago

1.2.181

7 months ago

1.2.180

7 months ago

1.2.183

7 months ago

1.2.182

7 months ago

1.2.185

7 months ago

1.2.184

7 months ago

1.2.187

6 months ago

1.2.186

7 months ago

1.2.191

6 months ago

1.2.190

6 months ago

1.2.158

11 months ago

1.2.157

11 months ago

1.2.156

11 months ago

1.2.155

11 months ago

1.2.150

11 months ago

1.2.152

11 months ago

1.2.151

11 months ago

1.2.154

11 months ago

1.2.153

11 months ago

1.2.134

12 months ago

1.2.133

12 months ago

1.2.135

12 months ago

1.2.138

11 months ago

1.2.137

12 months ago

1.2.139

11 months ago

1.2.130

12 months ago

1.2.132

12 months ago

1.2.131

12 months ago

1.2.145

11 months ago

1.2.144

11 months ago

1.2.147

11 months ago

1.2.149

11 months ago

1.2.148

11 months ago

1.2.141

11 months ago

1.2.140

11 months ago

1.2.143

11 months ago

1.2.142

11 months ago

1.2.99

1 year ago

1.2.101

1 year ago

1.2.100

1 year ago

1.2.103

1 year ago

1.2.102

1 year ago

1.2.104

1 year ago

1.2.107

1 year ago

1.2.106

1 year ago

1.2.112

1 year ago

1.2.111

1 year ago

1.2.114

1 year ago

1.2.113

1 year ago

1.2.116

1 year ago

1.2.115

1 year ago

1.2.118

1 year ago

1.2.117

1 year ago

1.2.110

1 year ago

1.2.109

1 year ago

1.2.108

1 year ago

1.2.123

1 year ago

1.2.122

1 year ago

1.2.125

1 year ago

1.2.124

1 year ago

1.2.127

1 year ago

1.2.126

1 year ago

1.2.129

12 months ago

1.2.128

1 year ago

1.2.121

1 year ago

1.2.119

1 year ago

1.2.81

1 year ago

1.2.82

1 year ago

1.2.80

1 year ago

1.2.85

1 year ago

1.2.86

1 year ago

1.2.83

1 year ago

1.2.84

1 year ago

1.2.89

1 year ago

1.2.87

1 year ago

1.2.88

1 year ago

1.2.92

1 year ago

1.2.93

1 year ago

1.2.90

1 year ago

1.2.91

1 year ago

1.2.96

1 year ago

1.2.97

1 year ago

1.2.94

1 year ago

1.2.95

1 year ago

1.2.98

1 year ago

1.2.75

1 year ago

1.2.78

1 year ago

1.2.79

1 year ago

1.2.76

1 year ago

1.2.77

1 year ago

1.2.60

1 year ago

1.2.63

1 year ago

1.2.64

1 year ago

1.2.61

1 year ago

1.2.62

1 year ago

1.2.67

1 year ago

1.2.68

1 year ago

1.2.65

1 year ago

1.2.66

1 year ago

1.2.69

1 year ago

1.2.70

1 year ago

1.2.71

1 year ago

1.2.74

1 year ago

1.2.72

1 year ago

1.2.73

1 year ago

1.2.56

1 year ago

1.2.57

1 year ago

1.2.54

1 year ago

1.2.55

1 year ago

1.2.58

1 year ago

1.2.59

1 year ago

1.2.49

1 year ago

1.2.52

1 year ago

1.2.53

1 year ago

1.2.50

1 year ago

1.2.51

1 year ago

1.2.12

1 year ago

1.2.13

1 year ago

1.2.16

1 year ago

1.2.17

1 year ago

1.2.14

1 year ago

1.2.15

1 year ago

1.2.41

1 year ago

1.2.42

1 year ago

1.2.40

1 year ago

1.2.45

1 year ago

1.2.46

1 year ago

1.2.43

1 year ago

1.2.44

1 year ago

1.2.47

1 year ago

1.2.48

1 year ago

1.2.18

1 year ago

1.2.19

1 year ago

1.2.20

1 year ago

1.2.23

1 year ago

1.2.24

1 year ago

1.2.21

1 year ago

1.2.22

1 year ago

1.2.27

1 year ago

1.2.28

1 year ago

1.2.25

1 year ago

1.2.26

1 year ago

1.2.29

1 year ago

1.2.30

1 year ago

1.2.31

1 year ago

1.2.34

1 year ago

1.2.35

1 year ago

1.2.32

1 year ago

1.2.33

1 year ago

1.2.38

1 year ago

1.2.39

1 year ago

1.2.36

1 year ago

1.2.37

1 year ago

1.2.8

1 year ago

1.2.7

1 year ago

1.2.10

1 year ago

1.2.11

1 year ago

1.2.9

1 year ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.1.39

2 years ago

1.1.41

2 years ago

1.1.40

2 years ago

1.1.38

2 years ago

1.1.30

2 years ago

1.1.34

2 years ago

1.1.33

2 years ago

1.1.32

2 years ago

1.1.31

2 years ago

1.1.37

2 years ago

1.1.36

2 years ago

1.1.35

2 years ago

1.1.29

2 years ago

1.1.28

2 years ago

1.1.23

2 years ago

1.1.22

2 years ago

1.1.21

2 years ago

1.1.27

2 years ago

1.1.26

2 years ago

1.1.25

2 years ago

1.1.24

2 years ago

1.1.19

2 years ago

1.1.20

2 years ago

1.1.18

2 years ago

1.1.17

2 years ago

1.1.16

2 years ago

1.1.15

2 years ago

1.1.14

2 years ago

1.1.13

2 years ago

1.1.12

2 years ago

1.1.10

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago