svg-loaders-react 3.1.5 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/.github/workflows/test.yml +1 -1
  2. package/README.md +5 -0
  3. package/package.json +21 -13
  4. package/test/__snapshots__/audio.test.js.snap +75 -0
  5. package/test/__snapshots__/ball-triangle.test.js.snap +91 -0
  6. package/test/__snapshots__/bars.test.js.snap +130 -0
  7. package/test/__snapshots__/circles.test.js.snap +36 -0
  8. package/test/__snapshots__/grid.test.js.snap +139 -0
  9. package/test/__snapshots__/hearts.test.js.snap +41 -0
  10. package/test/__snapshots__/oval.test.js.snap +37 -0
  11. package/test/__snapshots__/puff.test.js.snap +70 -0
  12. package/test/__snapshots__/rings.test.js.snap +95 -0
  13. package/test/__snapshots__/spinning-circles.test.js.snap +138 -0
  14. package/test/__snapshots__/tail-spin.test.js.snap +70 -0
  15. package/test/__snapshots__/three-dots.test.js.snap +91 -0
  16. package/test/audio.test.js +6 -11
  17. package/test/ball-triangle.test.js +6 -11
  18. package/test/bars.test.js +6 -11
  19. package/test/circles.test.js +6 -11
  20. package/test/grid.test.js +6 -11
  21. package/test/hearts.test.js +6 -11
  22. package/test/helpers/loader-behavior.js +111 -0
  23. package/test/index.test.js +16 -0
  24. package/test/oval.test.js +6 -11
  25. package/test/puff.test.js +6 -11
  26. package/test/rings.test.js +6 -11
  27. package/test/spinning-circles.test.js +5 -11
  28. package/test/tail-spin.test.js +5 -11
  29. package/test/three-dots.test.js +6 -11
  30. package/src/setupTests.js +0 -6
package/.github/workflows/test.yml CHANGED
@@ -17,5 +17,5 @@ jobs:
17
17
  node-version-file: '.nvmrc'
18
18
  cache: 'npm'
19
19
  - run: npm ci
20
- - run: npm test
20
+ - run: npm run test:coverage
21
21
  - run: npm run build
package/README.md CHANGED
@@ -27,6 +27,11 @@ This is a zero-dependency React adaptation of Sam Herberts [SVG Loaders](https:/
27
27
 
28
28
  # Usage
29
29
 
30
+ ## Requirements
31
+ React 19 or newer (`react` and `react-dom` are peer dependencies).
32
+
33
+ Still on React 18? Use the 3.x line: `npm install svg-loaders-react@3`.
34
+
30
35
  ## Install from NPM
31
36
  ```bash
32
37
  npm install svg-loaders-react
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svg-loaders-react",
3
- "version": "3.1.5",
3
+ "version": "4.0.0",
4
4
  "description": "React implementation of the SVG Loaders library by Sam Herbert",
5
5
  "repository": {
6
6
  "type": "git",
@@ -8,15 +8,15 @@
8
8
  },
9
9
  "main": "dist/index.js",
10
10
  "peerDependencies": {
11
- "react": ">=18",
12
- "react-dom": ">=18"
11
+ "react": ">=19",
12
+ "react-dom": ">=19"
13
13
  },
14
14
  "devDependencies": {
15
15
  "@babel/core": "^7.4.5",
16
16
  "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
17
17
  "@babel/preset-env": "^7.4.5",
18
18
  "@babel/preset-react": "^7.0.0",
19
- "@cfaester/enzyme-adapter-react-18": "^0.8.0",
19
+ "@testing-library/dom": "^10.4.2",
20
20
  "@testing-library/react": "^16.1.0",
21
21
  "babel-cli": "^6.26.0",
22
22
  "babel-eslint": "^10.0.2",
@@ -24,7 +24,6 @@
24
24
  "babel-loader": "^8.0.6",
25
25
  "babel-plugin-transform-react-jsx": "^6.24.1",
26
26
  "babel-preset-env": "^1.7.0",
27
- "enzyme": "^3.10.0",
28
27
  "eslint": "^9.32.0",
29
28
  "eslint-config-airbnb": "^19.0.4",
30
29
  "eslint-plugin-import": "^2.17.3",
@@ -32,11 +31,10 @@
32
31
  "eslint-plugin-react": "^7.13.0",
33
32
  "identity-obj-proxy": "^3.0.0",
34
33
  "jest": "^29.7.0",
35
- "jsdom": "^25.0.1",
36
- "jsdom-global": "^3.0.2",
34
+ "jest-environment-jsdom": "^29.7.0",
37
35
  "prop-types": "^15.8.1",
38
- "react": "^18.3.1",
39
- "react-dom": "^18.3.1",
36
+ "react": "^19.3.1",
37
+ "react-dom": "^19.3.1",
40
38
  "webpack": "^5.112.2",
41
39
  "webpack-cli": "^7.2.3"
42
40
  },
@@ -46,12 +44,22 @@
46
44
  "test": "jest",
47
45
  "test:dev": "jest --watch",
48
46
  "start": "webpack --watch",
49
- "build": "webpack --mode production"
47
+ "build": "webpack --mode production",
48
+ "test:coverage": "jest --coverage"
50
49
  },
51
50
  "jest": {
52
- "setupFiles": [
53
- "./src/setupTests.js"
54
- ]
51
+ "testEnvironment": "jsdom",
52
+ "collectCoverageFrom": [
53
+ "src/svg-loader-components/**/*.js"
54
+ ],
55
+ "coverageThreshold": {
56
+ "global": {
57
+ "branches": 100,
58
+ "functions": 100,
59
+ "lines": 100,
60
+ "statements": 100
61
+ }
62
+ }
55
63
  },
56
64
  "keywords": [
57
65
  "react",
package/test/__snapshots__/audio.test.js.snap ADDED
@@ -0,0 +1,75 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`<Audio /> matches the markup snapshot 1`] = `
4
+ <svg
5
+ class="svg-loaders-svg"
6
+ fill="#FFF"
7
+ height="80"
8
+ viewBox="0 0 55 80"
9
+ width="55"
10
+ >
11
+ <g
12
+ transform="matrix(1 0 0 -1 0 80)"
13
+ >
14
+ <rect
15
+ height="20"
16
+ rx="3"
17
+ width="10"
18
+ >
19
+ <animate
20
+ attributeName="height"
21
+ begin="0s"
22
+ calcMode="linear"
23
+ dur="4.3s"
24
+ repeatCount="indefinite"
25
+ values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20"
26
+ />
27
+ </rect>
28
+ <rect
29
+ height="80"
30
+ rx="3"
31
+ width="10"
32
+ x="15"
33
+ >
34
+ <animate
35
+ attributeName="height"
36
+ begin="0s"
37
+ calcMode="linear"
38
+ dur="2s"
39
+ repeatCount="indefinite"
40
+ values="80;55;33;5;75;23;73;33;12;14;60;80"
41
+ />
42
+ </rect>
43
+ <rect
44
+ height="50"
45
+ rx="3"
46
+ width="10"
47
+ x="30"
48
+ >
49
+ <animate
50
+ attributeName="height"
51
+ begin="0s"
52
+ calcMode="linear"
53
+ dur="1.4s"
54
+ repeatCount="indefinite"
55
+ values="50;34;78;23;56;23;34;76;80;54;21;50"
56
+ />
57
+ </rect>
58
+ <rect
59
+ height="30"
60
+ rx="3"
61
+ width="10"
62
+ x="45"
63
+ >
64
+ <animate
65
+ attributeName="height"
66
+ begin="0s"
67
+ calcMode="linear"
68
+ dur="2s"
69
+ repeatCount="indefinite"
70
+ values="30;45;13;80;56;72;45;76;34;23;67;30"
71
+ />
72
+ </rect>
73
+ </g>
74
+ </svg>
75
+ `;
package/test/__snapshots__/ball-triangle.test.js.snap ADDED
@@ -0,0 +1,91 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`<BallTriangle /> matches the markup snapshot 1`] = `
4
+ <svg
5
+ class="svg-loaders-svg"
6
+ height="57"
7
+ stroke="#fff"
8
+ viewBox="0 0 57 57"
9
+ width="57"
10
+ >
11
+ <g
12
+ fill="none"
13
+ fill-rule="evenodd"
14
+ stroke-width="2"
15
+ transform="translate(1 1)"
16
+ >
17
+ <circle
18
+ cx="5"
19
+ cy="50"
20
+ r="5"
21
+ >
22
+ <animate
23
+ attributeName="cy"
24
+ begin="0s"
25
+ calcMode="linear"
26
+ dur="2.2s"
27
+ repeatCount="indefinite"
28
+ values="50;5;50;50"
29
+ />
30
+ <animate
31
+ attributeName="cx"
32
+ begin="0s"
33
+ calcMode="linear"
34
+ dur="2.2s"
35
+ repeatCount="indefinite"
36
+ values="5;27;49;5"
37
+ />
38
+ </circle>
39
+ <circle
40
+ cx="27"
41
+ cy="5"
42
+ r="5"
43
+ >
44
+ <animate
45
+ attributeName="cy"
46
+ begin="0s"
47
+ calcMode="linear"
48
+ dur="2.2s"
49
+ from="5"
50
+ repeatCount="indefinite"
51
+ to="5"
52
+ values="5;50;50;5"
53
+ />
54
+ <animate
55
+ attributeName="cx"
56
+ begin="0s"
57
+ calcMode="linear"
58
+ dur="2.2s"
59
+ from="27"
60
+ repeatCount="indefinite"
61
+ to="27"
62
+ values="27;49;5;27"
63
+ />
64
+ </circle>
65
+ <circle
66
+ cx="49"
67
+ cy="50"
68
+ r="5"
69
+ >
70
+ <animate
71
+ attributeName="cy"
72
+ begin="0s"
73
+ calcMode="linear"
74
+ dur="2.2s"
75
+ repeatCount="indefinite"
76
+ values="50;50;5;50"
77
+ />
78
+ <animate
79
+ attributeName="cx"
80
+ begin="0s"
81
+ calcMode="linear"
82
+ dur="2.2s"
83
+ from="49"
84
+ repeatCount="indefinite"
85
+ to="49"
86
+ values="49;5;27;49"
87
+ />
88
+ </circle>
89
+ </g>
90
+ </svg>
91
+ `;
package/test/__snapshots__/bars.test.js.snap ADDED
@@ -0,0 +1,130 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`<Bars /> matches the markup snapshot 1`] = `
4
+ <svg
5
+ class="svg-loaders-svg"
6
+ fill="#fff"
7
+ height="140"
8
+ viewBox="0 0 135 140"
9
+ width="135"
10
+ >
11
+ <rect
12
+ height="120"
13
+ rx="6"
14
+ width="15"
15
+ y="10"
16
+ >
17
+ <animate
18
+ attributeName="height"
19
+ begin="0.5s"
20
+ calcMode="linear"
21
+ dur="1s"
22
+ repeatCount="indefinite"
23
+ values="120;110;100;90;80;70;60;50;40;140;120"
24
+ />
25
+ <animate
26
+ attributeName="y"
27
+ begin="0.5s"
28
+ calcMode="linear"
29
+ dur="1s"
30
+ repeatCount="indefinite"
31
+ values="10;15;20;25;30;35;40;45;50;0;10"
32
+ />
33
+ </rect>
34
+ <rect
35
+ height="120"
36
+ rx="6"
37
+ width="15"
38
+ x="30"
39
+ y="10"
40
+ >
41
+ <animate
42
+ attributeName="height"
43
+ begin="0.25s"
44
+ calcMode="linear"
45
+ dur="1s"
46
+ repeatCount="indefinite"
47
+ values="120;110;100;90;80;70;60;50;40;140;120"
48
+ />
49
+ <animate
50
+ attributeName="y"
51
+ begin="0.25s"
52
+ calcMode="linear"
53
+ dur="1s"
54
+ repeatCount="indefinite"
55
+ values="10;15;20;25;30;35;40;45;50;0;10"
56
+ />
57
+ </rect>
58
+ <rect
59
+ height="140"
60
+ rx="6"
61
+ width="15"
62
+ x="60"
63
+ >
64
+ <animate
65
+ attributeName="height"
66
+ begin="0s"
67
+ calcMode="linear"
68
+ dur="1s"
69
+ repeatCount="indefinite"
70
+ values="120;110;100;90;80;70;60;50;40;140;120"
71
+ />
72
+ <animate
73
+ attributeName="y"
74
+ begin="0s"
75
+ calcMode="linear"
76
+ dur="1s"
77
+ repeatCount="indefinite"
78
+ values="10;15;20;25;30;35;40;45;50;0;10"
79
+ />
80
+ </rect>
81
+ <rect
82
+ height="120"
83
+ rx="6"
84
+ width="15"
85
+ x="90"
86
+ y="10"
87
+ >
88
+ <animate
89
+ attributeName="height"
90
+ begin="0.25s"
91
+ calcMode="linear"
92
+ dur="1s"
93
+ repeatCount="indefinite"
94
+ values="120;110;100;90;80;70;60;50;40;140;120"
95
+ />
96
+ <animate
97
+ attributeName="y"
98
+ begin="0.25s"
99
+ calcMode="linear"
100
+ dur="1s"
101
+ repeatCount="indefinite"
102
+ values="10;15;20;25;30;35;40;45;50;0;10"
103
+ />
104
+ </rect>
105
+ <rect
106
+ height="120"
107
+ rx="6"
108
+ width="15"
109
+ x="120"
110
+ y="10"
111
+ >
112
+ <animate
113
+ attributeName="height"
114
+ begin="0.5s"
115
+ calcMode="linear"
116
+ dur="1s"
117
+ repeatCount="indefinite"
118
+ values="120;110;100;90;80;70;60;50;40;140;120"
119
+ />
120
+ <animate
121
+ attributeName="y"
122
+ begin="0.5s"
123
+ calcMode="linear"
124
+ dur="1s"
125
+ repeatCount="indefinite"
126
+ values="10;15;20;25;30;35;40;45;50;0;10"
127
+ />
128
+ </rect>
129
+ </svg>
130
+ `;
package/test/__snapshots__/circles.test.js.snap ADDED
@@ -0,0 +1,36 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`<Circles /> matches the markup snapshot 1`] = `
4
+ <svg
5
+ class="svg-loaders-svg"
6
+ fill="#fff"
7
+ height="135"
8
+ viewBox="0 0 135 135"
9
+ width="135"
10
+ >
11
+ <path
12
+ d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"
13
+ >
14
+ <animatetransform
15
+ attributeName="transform"
16
+ dur="2.5s"
17
+ from="0 67 67"
18
+ repeatCount="indefinite"
19
+ to="-360 67 67"
20
+ type="rotate"
21
+ />
22
+ </path>
23
+ <path
24
+ d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"
25
+ >
26
+ <animatetransform
27
+ attributeName="transform"
28
+ dur="8s"
29
+ from="0 67 67"
30
+ repeatCount="indefinite"
31
+ to="360 67 67"
32
+ type="rotate"
33
+ />
34
+ </path>
35
+ </svg>
36
+ `;
package/test/__snapshots__/grid.test.js.snap ADDED
@@ -0,0 +1,139 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`<Grid /> matches the markup snapshot 1`] = `
4
+ <svg
5
+ class="svg-loaders-svg"
6
+ fill="#fff"
7
+ height="105"
8
+ viewBox="0 0 105 105"
9
+ width="105"
10
+ >
11
+ <circle
12
+ cx="12.5"
13
+ cy="12.5"
14
+ r="12.5"
15
+ >
16
+ <animate
17
+ attributeName="fill-opacity"
18
+ begin="0s"
19
+ calcMode="linear"
20
+ dur="1s"
21
+ repeatCount="indefinite"
22
+ values="1;.2;1"
23
+ />
24
+ </circle>
25
+ <circle
26
+ cx="12.5"
27
+ cy="52.5"
28
+ fill-opacity="0.5"
29
+ r="12.5"
30
+ >
31
+ <animate
32
+ attributeName="fill-opacity"
33
+ begin="100ms"
34
+ calcMode="linear"
35
+ dur="1s"
36
+ repeatCount="indefinite"
37
+ values="1;.2;1"
38
+ />
39
+ </circle>
40
+ <circle
41
+ cx="52.5"
42
+ cy="12.5"
43
+ r="12.5"
44
+ >
45
+ <animate
46
+ attributeName="fill-opacity"
47
+ begin="300ms"
48
+ calcMode="linear"
49
+ dur="1s"
50
+ repeatCount="indefinite"
51
+ values="1;.2;1"
52
+ />
53
+ </circle>
54
+ <circle
55
+ cx="52.5"
56
+ cy="52.5"
57
+ r="12.5"
58
+ >
59
+ <animate
60
+ attributeName="fill-opacity"
61
+ begin="600ms"
62
+ calcMode="linear"
63
+ dur="1s"
64
+ repeatCount="indefinite"
65
+ values="1;.2;1"
66
+ />
67
+ </circle>
68
+ <circle
69
+ cx="92.5"
70
+ cy="12.5"
71
+ r="12.5"
72
+ >
73
+ <animate
74
+ attributeName="fill-opacity"
75
+ begin="800ms"
76
+ calcMode="linear"
77
+ dur="1s"
78
+ repeatCount="indefinite"
79
+ values="1;.2;1"
80
+ />
81
+ </circle>
82
+ <circle
83
+ cx="92.5"
84
+ cy="52.5"
85
+ r="12.5"
86
+ >
87
+ <animate
88
+ attributeName="fill-opacity"
89
+ begin="400ms"
90
+ calcMode="linear"
91
+ dur="1s"
92
+ repeatCount="indefinite"
93
+ values="1;.2;1"
94
+ />
95
+ </circle>
96
+ <circle
97
+ cx="12.5"
98
+ cy="92.5"
99
+ r="12.5"
100
+ >
101
+ <animate
102
+ attributeName="fill-opacity"
103
+ begin="700ms"
104
+ calcMode="linear"
105
+ dur="1s"
106
+ repeatCount="indefinite"
107
+ values="1;.2;1"
108
+ />
109
+ </circle>
110
+ <circle
111
+ cx="52.5"
112
+ cy="92.5"
113
+ r="12.5"
114
+ >
115
+ <animate
116
+ attributeName="fill-opacity"
117
+ begin="500ms"
118
+ calcMode="linear"
119
+ dur="1s"
120
+ repeatCount="indefinite"
121
+ values="1;.2;1"
122
+ />
123
+ </circle>
124
+ <circle
125
+ cx="92.5"
126
+ cy="92.5"
127
+ r="12.5"
128
+ >
129
+ <animate
130
+ attributeName="fill-opacity"
131
+ begin="200ms"
132
+ calcMode="linear"
133
+ dur="1s"
134
+ repeatCount="indefinite"
135
+ values="1;.2;1"
136
+ />
137
+ </circle>
138
+ </svg>
139
+ `;
package/test/__snapshots__/hearts.test.js.snap ADDED
@@ -0,0 +1,41 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`<Hearts /> matches the markup snapshot 1`] = `
4
+ <svg
5
+ class="svg-loaders-svg"
6
+ fill="#fff"
7
+ height="64"
8
+ viewBox="0 0 140 64"
9
+ width="140"
10
+ >
11
+ <path
12
+ d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z"
13
+ fill-opacity="0.5"
14
+ >
15
+ <animate
16
+ attributeName="fill-opacity"
17
+ begin="0s"
18
+ calcMode="linear"
19
+ dur="1.4s"
20
+ repeatCount="indefinite"
21
+ values="0.5;1;0.5"
22
+ />
23
+ </path>
24
+ <path
25
+ d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z"
26
+ fill-opacity="0.5"
27
+ >
28
+ <animate
29
+ attributeName="fill-opacity"
30
+ begin="0.7s"
31
+ calcMode="linear"
32
+ dur="1.4s"
33
+ repeatCount="indefinite"
34
+ values="0.5;1;0.5"
35
+ />
36
+ </path>
37
+ <path
38
+ d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"
39
+ />
40
+ </svg>
41
+ `;
package/test/__snapshots__/oval.test.js.snap ADDED
@@ -0,0 +1,37 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`<Oval /> matches the markup snapshot 1`] = `
4
+ <svg
5
+ class="svg-loaders-svg"
6
+ height="38"
7
+ stroke="#fff"
8
+ viewBox="0 0 38 38"
9
+ width="38"
10
+ >
11
+ <g
12
+ fill="none"
13
+ fill-rule="evenodd"
14
+ stroke-width="2"
15
+ transform="translate(1 1)"
16
+ >
17
+ <circle
18
+ cx="18"
19
+ cy="18"
20
+ r="18"
21
+ stroke-opacity="0.5"
22
+ />
23
+ <path
24
+ d="M36 18c0-9.94-8.06-18-18-18"
25
+ >
26
+ <animatetransform
27
+ attributeName="transform"
28
+ dur="1s"
29
+ from="0 18 18"
30
+ repeatCount="indefinite"
31
+ to="360 18 18"
32
+ type="rotate"
33
+ />
34
+ </path>
35
+ </g>
36
+ </svg>
37
+ `;