Skip to content

Commit 82f8fa0

Browse files
author
Genki Katsutani
committed
Merge branch 'develop'
2 parents 75fcee1 + a1e418c commit 82f8fa0

File tree

3 files changed

+67
-55
lines changed

3 files changed

+67
-55
lines changed

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "getup",
3-
"version": "9.0.1",
3+
"version": "9.0.2",
44
"description": "Frontend boilerplate",
55
"author": "nibushibu",
66
"scripts": {
@@ -14,14 +14,14 @@
1414
"js-build": "esbuild src/js/main.js --bundle --minify --outfile=dist/js/main.js",
1515
"js": "esbuild src/js/main.js --bundle --sourcemap --outfile=dist/js/main.js",
1616
"preview": "npx http-server dist -o / -c-1",
17-
"riot-single": "riot --output src/js/components --sourcemap file --extension html",
17+
"riot-single": "riot --output src/js/components --sourcemap file",
1818
"riot": "riot src/riot --output src/js/components --sourcemap file",
19-
"ready": "run-p html js css",
19+
"ready": "run-s html riot js css",
2020
"start": "run-s ready watch",
2121
"watch:css": "onchange src/css -- npm run css",
2222
"watch:html": "onchange 'src/html' -- npm run html",
2323
"watch:js": "onchange 'src/js/**/*.js' -- npm run js",
24-
"watch:riot": "riot src/riot --output dist/js --sourcemap file --extension html --watch",
24+
"watch:riot": "riot src/riot --output src/js/components --sourcemap file --watch",
2525
"watch": "run-p watch:* preview"
2626
},
2727
"dependencies": {

‎src/riot/my-app.riot

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<my-app>
22
<h1>Thie is Riot test.</h1>
3+
<ui-icon data-icon="globe" data-fill-gradient="{true}" class="c-test-icon"></ui-icon>
34
<p>{ state.test }</p>
45
<p>
56
<button class="unmount-animation" onclick="{ animationUnmount }" data-ref="button">

‎src/riot/ui-icon.riot

+62-51
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,87 @@
11
<ui-icon>
2-
<svg if="{ props.dataIcon == 'bull-horn' }" width="18" height="18" viewBox="0 0 18 18" fill="none"
3-
xmlns="http://www.w3.org/2000/svg">
4-
<path fill-rule="evenodd" clip-rule="evenodd"
5-
d="M15.1233 4.84386C15.7055 5.00187 16.1926 5.44982 16.36 6.07467C16.5274 6.69952 16.3296 7.33098 15.9042 7.75928L16.9873 11.8016C17.0526 12.0454 17.0268 12.698 16.3679 12.8745C16.1757 12.9258 15.9719 12.9103 15.7898 12.8305L13.0593 11.634C11.6883 11.0338 10.1371 10.9163 8.69176 11.3036L7.94924 11.5026C7.9478 11.7923 7.98064 12.0862 8.05936 12.38C8.2654 13.149 8.71339 13.7896 9.29954 14.2425C9.86388 14.6785 9.66174 15.5784 8.9729 15.763L7.00871 16.2893C6.69456 16.3734 6.34983 16.2853 6.13685 16.0394C5.46783 15.2666 4.95669 14.3385 4.67491 13.2869C4.59796 12.9997 4.54332 12.7122 4.50582 12.4252L3.61469 12.664C2.67993 12.9145 1.71933 12.3599 1.46886 11.4251L0.788666 8.88659C0.538197 7.95183 1.09279 6.99124 2.02756 6.74077L7.10463 5.38037C8.55001 4.99309 9.83461 4.11577 10.7221 2.91039L12.4885 0.508993C12.6088 0.345272 12.7789 0.232244 12.9671 0.181796C13.6287 0.00451918 13.9781 0.570129 14.0401 0.801506L15.1233 4.84386ZM13.7622 10.0295L14.8235 10.4945L12.8194 3.01529L12.1328 3.94862C11.011 5.47357 9.38584 6.58299 7.5581 7.07273L8.23829 9.61127C10.066 9.12152 12.0282 9.26974 13.7622 10.0295Z"
6-
fill="currentColor" />
7-
</svg>
2+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
83

9-
<svg if="{ props.dataIcon == 'carton' || props.dataIcon == 'rental' }" width="18" height="18" viewBox="0 0 18 18"
10-
fill="none" xmlns="http://www.w3.org/2000/svg">
11-
<path
12-
d="M17.9944 4.00027V3.99011C17.9888 3.9629 17.9833 3.93573 17.9759 3.91017C17.9703 3.88644 17.9611 3.86267 17.9518 3.83891C17.95 3.83381 17.9482 3.82875 17.9462 3.82534C17.9351 3.80157 17.9241 3.77767 17.9093 3.75394C17.9001 3.73868 17.8908 3.72331 17.8779 3.70806C17.8631 3.68429 17.8446 3.66218 17.8261 3.64172C17.8223 3.63665 17.8168 3.63156 17.8113 3.62646C17.7984 3.61289 17.7854 3.60108 17.7706 3.58912C17.7355 3.5552 17.6929 3.52623 17.6485 3.50246C17.6264 3.48889 17.6042 3.47694 17.5803 3.4684C17.5765 3.46509 17.5728 3.46333 17.5672 3.46168C17.5653 3.45992 17.5635 3.45824 17.5617 3.45824L14.1444 2.05311L12.4931 1.37333L9.30137 0.0599325C9.10904 -0.0199775 8.89085 -0.0199775 8.69848 0.0599325L0.438187 3.45827C0.436427 3.45827 0.434591 3.45992 0.432678 3.46172C0.42713 3.46337 0.423419 3.46516 0.419823 3.46843C0.395757 3.47694 0.37349 3.48889 0.351338 3.5025C0.306957 3.52626 0.264374 3.55523 0.229252 3.58916C0.214483 3.60111 0.201628 3.61292 0.18862 3.62649C0.183072 3.63159 0.177563 3.63669 0.173852 3.64175C0.155296 3.66221 0.136931 3.68433 0.121972 3.70809C0.109116 3.72335 0.0998576 3.73871 0.0905988 3.75397C0.0758306 3.7777 0.0647353 3.80161 0.0536782 3.82537C0.051727 3.82882 0.0499288 3.83388 0.0481306 3.83894C0.0388717 3.86271 0.0296129 3.88647 0.0240653 3.9102C0.0166047 3.93573 0.011057 3.96294 0.00554759 3.99015V4.00031C0.00179815 4.02587 0 4.05129 0 4.07846V13.9219C0 14.1887 0.172015 14.4316 0.438187 14.542L8.68015 17.9337C8.68566 17.9354 8.69121 17.9387 8.69851 17.9404C8.74485 17.9592 8.79282 17.9744 8.84275 17.9846C8.8946 17.9948 8.94827 18 9 18C9.05364 18 9.10537 17.9948 9.15725 17.9846C9.20714 17.9744 9.25527 17.9592 9.30145 17.9404L9.32 17.9337L17.5618 14.542C17.8281 14.4316 18 14.1887 18 13.9219V4.07843C17.9999 4.05125 17.9981 4.02583 17.9944 4.00027ZM8.26033 13.8527L8.2578 16.2709L1.47927 13.4817V5.12858L3.49865 5.95942L3.57636 5.99142V8.74003L5.40295 9.49108L6.15704 9.80361V9.80115L6.16332 9.80361V7.84257L6.16573 7.05584L8.26029 7.91864V13.8527H8.26033ZM10.6796 2.11956L4.23454 4.77181L3.22127 4.35475L2.55502 4.07653L8.99996 1.42445L10.0152 1.84218L10.6796 2.11956ZM7.1798 5.9796L13.6247 3.32739L14.7169 3.77686L15.4449 4.0805L8.99996 6.73258L7.89567 6.27815L7.1798 5.9796ZM9.7396 16.2693V7.91868L16.5207 5.12858V13.4817L11.7089 15.4616L9.7396 16.2693Z"
13-
fill="currentColor" />
14-
</svg>
4+
<g if="{ props.dataIcon == 'bull-horn' }">
5+
<path fill-rule="evenodd" clip-rule="evenodd"
6+
d="M15.1233 4.84386C15.7055 5.00187 16.1926 5.44982 16.36 6.07467C16.5274 6.69952 16.3296 7.33098 15.9042 7.75928L16.9873 11.8016C17.0526 12.0454 17.0268 12.698 16.3679 12.8745C16.1757 12.9258 15.9719 12.9103 15.7898 12.8305L13.0593 11.634C11.6883 11.0338 10.1371 10.9163 8.69176 11.3036L7.94924 11.5026C7.9478 11.7923 7.98064 12.0862 8.05936 12.38C8.2654 13.149 8.71339 13.7896 9.29954 14.2425C9.86388 14.6785 9.66174 15.5784 8.9729 15.763L7.00871 16.2893C6.69456 16.3734 6.34983 16.2853 6.13685 16.0394C5.46783 15.2666 4.95669 14.3385 4.67491 13.2869C4.59796 12.9997 4.54332 12.7122 4.50582 12.4252L3.61469 12.664C2.67993 12.9145 1.71933 12.3599 1.46886 11.4251L0.788666 8.88659C0.538197 7.95183 1.09279 6.99124 2.02756 6.74077L7.10463 5.38037C8.55001 4.99309 9.83461 4.11577 10.7221 2.91039L12.4885 0.508993C12.6088 0.345272 12.7789 0.232244 12.9671 0.181796C13.6287 0.00451918 13.9781 0.570129 14.0401 0.801506L15.1233 4.84386ZM13.7622 10.0295L14.8235 10.4945L12.8194 3.01529L12.1328 3.94862C11.011 5.47357 9.38584 6.58299 7.5581 7.07273L8.23829 9.61127C10.066 9.12152 12.0282 9.26974 13.7622 10.0295Z"
7+
fill="{getFill()}" />
8+
</g>
159

16-
<svg if="{ props.dataIcon == 'download' }" width="18" height="18" viewBox="0 0 18 18" fill="none"
17-
xmlns="http://www.w3.org/2000/svg">
18-
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 1H7V7H2.93774L9 13L15 7H11V1ZM0 15V18H18V15H0Z"
19-
fill="currentColor" />
20-
</svg>
10+
<g if="{ props.dataIcon == 'carton' || props.dataIcon == 'rental' }">
11+
<path
12+
d="M17.9944 4.00027V3.99011C17.9888 3.9629 17.9833 3.93573 17.9759 3.91017C17.9703 3.88644 17.9611 3.86267 17.9518 3.83891C17.95 3.83381 17.9482 3.82875 17.9462 3.82534C17.9351 3.80157 17.9241 3.77767 17.9093 3.75394C17.9001 3.73868 17.8908 3.72331 17.8779 3.70806C17.8631 3.68429 17.8446 3.66218 17.8261 3.64172C17.8223 3.63665 17.8168 3.63156 17.8113 3.62646C17.7984 3.61289 17.7854 3.60108 17.7706 3.58912C17.7355 3.5552 17.6929 3.52623 17.6485 3.50246C17.6264 3.48889 17.6042 3.47694 17.5803 3.4684C17.5765 3.46509 17.5728 3.46333 17.5672 3.46168C17.5653 3.45992 17.5635 3.45824 17.5617 3.45824L14.1444 2.05311L12.4931 1.37333L9.30137 0.0599325C9.10904 -0.0199775 8.89085 -0.0199775 8.69848 0.0599325L0.438187 3.45827C0.436427 3.45827 0.434591 3.45992 0.432678 3.46172C0.42713 3.46337 0.423419 3.46516 0.419823 3.46843C0.395757 3.47694 0.37349 3.48889 0.351338 3.5025C0.306957 3.52626 0.264374 3.55523 0.229252 3.58916C0.214483 3.60111 0.201628 3.61292 0.18862 3.62649C0.183072 3.63159 0.177563 3.63669 0.173852 3.64175C0.155296 3.66221 0.136931 3.68433 0.121972 3.70809C0.109116 3.72335 0.0998576 3.73871 0.0905988 3.75397C0.0758306 3.7777 0.0647353 3.80161 0.0536782 3.82537C0.051727 3.82882 0.0499288 3.83388 0.0481306 3.83894C0.0388717 3.86271 0.0296129 3.88647 0.0240653 3.9102C0.0166047 3.93573 0.011057 3.96294 0.00554759 3.99015V4.00031C0.00179815 4.02587 0 4.05129 0 4.07846V13.9219C0 14.1887 0.172015 14.4316 0.438187 14.542L8.68015 17.9337C8.68566 17.9354 8.69121 17.9387 8.69851 17.9404C8.74485 17.9592 8.79282 17.9744 8.84275 17.9846C8.8946 17.9948 8.94827 18 9 18C9.05364 18 9.10537 17.9948 9.15725 17.9846C9.20714 17.9744 9.25527 17.9592 9.30145 17.9404L9.32 17.9337L17.5618 14.542C17.8281 14.4316 18 14.1887 18 13.9219V4.07843C17.9999 4.05125 17.9981 4.02583 17.9944 4.00027ZM8.26033 13.8527L8.2578 16.2709L1.47927 13.4817V5.12858L3.49865 5.95942L3.57636 5.99142V8.74003L5.40295 9.49108L6.15704 9.80361V9.80115L6.16332 9.80361V7.84257L6.16573 7.05584L8.26029 7.91864V13.8527H8.26033ZM10.6796 2.11956L4.23454 4.77181L3.22127 4.35475L2.55502 4.07653L8.99996 1.42445L10.0152 1.84218L10.6796 2.11956ZM7.1798 5.9796L13.6247 3.32739L14.7169 3.77686L15.4449 4.0805L8.99996 6.73258L7.89567 6.27815L7.1798 5.9796ZM9.7396 16.2693V7.91868L16.5207 5.12858V13.4817L11.7089 15.4616L9.7396 16.2693Z"
13+
fill="{getFill()}" />
14+
</g>
2115

22-
<svg if="{ props.dataIcon == 'external' }" width="18" height="18" viewBox="0 0 18 18" fill="none"
23-
xmlns="http://www.w3.org/2000/svg">
24-
<path fill-rule="evenodd" clip-rule="evenodd"
25-
d="M2.77778 2.77778V15.2222H15.2222V9L17 10.7778V15.2222C17 16.2027 16.2027 17 15.2222 17H2.77778C1.79733 17 1 16.2027 1 15.2222V2.77778C1 1.79733 1.79733 1 2.77778 1H7.22222L9 2.77778H2.77778ZM12.816 3.92711L9.88886 1H17V8.11111L14.0729 5.184L7.85064 11.4062L6.59375 10.1493L12.816 3.92711Z"
26-
fill="currentColor" />
27-
</svg>
16+
<g if="{ props.dataIcon == 'download' }">
17+
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 1H7V7H2.93774L9 13L15 7H11V1ZM0 15V18H18V15H0Z"
18+
fill="{getFill()}" />
19+
</g>
2820

29-
<svg if="{ props.dataIcon == 'globe' || props.dataIcon == 'web' }" width="18" height="18" viewBox="0 0 18 18"
30-
fill="none" xmlns="http://www.w3.org/2000/svg">
31-
<path
32-
d="M9 0C4.0374 0 0 4.0374 0 9C0 13.9626 4.0374 18 9 18C13.9626 18 18 13.9626 18 9C18 4.0374 13.9626 0 9 0ZM16.1379 8.1H13.6503C13.5393 6.13012 12.9882 4.21017 12.0375 2.4813C13.1393 2.99615 14.093 3.78126 14.8099 4.76362C15.5268 5.74598 15.9836 6.89369 16.1379 8.1ZM9.477 1.8243C10.4085 3.0519 11.6613 5.2263 11.8413 8.1H6.327C6.4521 5.7636 7.2216 3.5748 8.5329 1.8234C8.6877 1.8144 8.8425 1.8 9 1.8C9.1611 1.8 9.3186 1.8144 9.477 1.8243ZM6.0192 2.4543C5.1336 4.1562 4.6224 6.0858 4.527 8.1H1.8621C2.01759 6.88305 2.48097 5.72589 3.2084 4.73797C3.93584 3.75006 4.90327 2.96405 6.0192 2.4543ZM1.8621 9.9H4.5387C4.6611 12.0411 5.1372 13.9302 5.9391 15.507C4.84307 14.9903 3.89496 14.2058 3.18236 13.2257C2.46977 12.2457 2.0157 11.1019 1.8621 9.9ZM8.505 16.1757C7.2441 14.6475 6.4998 12.5064 6.3369 9.9H11.8386C11.6514 12.3957 10.8333 14.5764 9.4959 16.1748C9.3321 16.1856 9.1683 16.2 9 16.2C8.8326 16.2 8.6697 16.1856 8.505 16.1757ZM12.1149 15.4809C12.9744 13.8663 13.4991 11.97 13.6368 9.9H16.137C15.9851 11.0918 15.5376 12.2268 14.8351 13.2015C14.1326 14.1762 13.1975 14.9598 12.1149 15.4809Z"
33-
fill="currentColor" />
34-
</svg>
21+
<g if="{ props.dataIcon == 'external' }">
22+
<path fill-rule="evenodd" clip-rule="evenodd"
23+
d="M2.77778 2.77778V15.2222H15.2222V9L17 10.7778V15.2222C17 16.2027 16.2027 17 15.2222 17H2.77778C1.79733 17 1 16.2027 1 15.2222V2.77778C1 1.79733 1.79733 1 2.77778 1H7.22222L9 2.77778H2.77778ZM12.816 3.92711L9.88886 1H17V8.11111L14.0729 5.184L7.85064 11.4062L6.59375 10.1493L12.816 3.92711Z"
24+
fill="{getFill()}" />
25+
</g>
3526

36-
<svg if="{ props.dataIcon == 'yen' || props.dataIcon == 'buy' }" width="18" height="18" viewBox="0 0 18 18"
37-
fill="none" xmlns="http://www.w3.org/2000/svg">
38-
<path fill-rule="evenodd" clip-rule="evenodd"
39-
d="M16 9C16 12.866 12.866 16 9 16C5.13401 16 2 12.866 2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9ZM18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9ZM10.0597 14H7.93575V12.008H5.83575V11H7.93575V10.268H5.83575V9.248H7.46775L5.48775 5.288H7.68375L8.33175 7.04C8.35696 7.11004 8.38218 7.18024 8.40743 7.25055C8.59851 7.78255 8.79177 8.32064 9.00375 8.84H9.05175C9.26775 8.24 9.49575 7.628 9.72375 7.04L10.3597 5.288H12.5077L10.5157 9.248H12.1597V10.268H10.0597V11H12.1597V12.008H10.0597V14Z"
40-
fill="currentColor" />
41-
</svg>
27+
<g if="{ props.dataIcon == 'globe' || props.dataIcon == 'web' }">
28+
<path
29+
d="M9 0C4.0374 0 0 4.0374 0 9C0 13.9626 4.0374 18 9 18C13.9626 18 18 13.9626 18 9C18 4.0374 13.9626 0 9 0ZM16.1379 8.1H13.6503C13.5393 6.13012 12.9882 4.21017 12.0375 2.4813C13.1393 2.99615 14.093 3.78126 14.8099 4.76362C15.5268 5.74598 15.9836 6.89369 16.1379 8.1ZM9.477 1.8243C10.4085 3.0519 11.6613 5.2263 11.8413 8.1H6.327C6.4521 5.7636 7.2216 3.5748 8.5329 1.8234C8.6877 1.8144 8.8425 1.8 9 1.8C9.1611 1.8 9.3186 1.8144 9.477 1.8243ZM6.0192 2.4543C5.1336 4.1562 4.6224 6.0858 4.527 8.1H1.8621C2.01759 6.88305 2.48097 5.72589 3.2084 4.73797C3.93584 3.75006 4.90327 2.96405 6.0192 2.4543ZM1.8621 9.9H4.5387C4.6611 12.0411 5.1372 13.9302 5.9391 15.507C4.84307 14.9903 3.89496 14.2058 3.18236 13.2257C2.46977 12.2457 2.0157 11.1019 1.8621 9.9ZM8.505 16.1757C7.2441 14.6475 6.4998 12.5064 6.3369 9.9H11.8386C11.6514 12.3957 10.8333 14.5764 9.4959 16.1748C9.3321 16.1856 9.1683 16.2 9 16.2C8.8326 16.2 8.6697 16.1856 8.505 16.1757ZM12.1149 15.4809C12.9744 13.8663 13.4991 11.97 13.6368 9.9H16.137C15.9851 11.0918 15.5376 12.2268 14.8351 13.2015C14.1326 14.1762 13.1975 14.9598 12.1149 15.4809Z"
30+
fill="{getFill()}" />
31+
</g>
4232

43-
<svg if="{ props.dataIcon == 'youtube' }" width="18" height="18" viewBox="0 0 18 18" fill="none"
44-
xmlns="http://www.w3.org/2000/svg">
45-
<path fill-rule="evenodd" clip-rule="evenodd"
46-
d="M16.0323 2.88814C16.8068 3.10169 17.4168 3.7309 17.6238 4.52995C18 5.97823 18 9 18 9C18 9 18 12.0218 17.6238 13.4699C17.4168 14.2689 16.8068 14.8983 16.0323 15.1119C14.6286 15.5 8.99993 15.5 8.99993 15.5C8.99993 15.5 3.37123 15.5 1.9675 15.1119C1.19304 14.8983 0.583035 14.2689 0.376047 13.4699C0 12.0218 0 9 0 9C0 9 0 5.97823 0.376047 4.52995C0.583035 3.7309 1.19304 3.10169 1.9675 2.88814C3.37123 2.5 8.99993 2.5 8.99993 2.5C8.99993 2.5 14.6286 2.5 16.0323 2.88814ZM11.8977 9.19613L7.21106 12.0624V6.32983L11.8977 9.19613Z"
47-
fill="currentColor" />
48-
</svg>
33+
<g if="{ props.dataIcon == 'yen' || props.dataIcon == 'buy' }">
34+
<path fill-rule="evenodd" clip-rule="evenodd"
35+
d="M16 9C16 12.866 12.866 16 9 16C5.13401 16 2 12.866 2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9ZM18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9ZM10.0597 14H7.93575V12.008H5.83575V11H7.93575V10.268H5.83575V9.248H7.46775L5.48775 5.288H7.68375L8.33175 7.04C8.35696 7.11004 8.38218 7.18024 8.40743 7.25055C8.59851 7.78255 8.79177 8.32064 9.00375 8.84H9.05175C9.26775 8.24 9.49575 7.628 9.72375 7.04L10.3597 5.288H12.5077L10.5157 9.248H12.1597V10.268H10.0597V11H12.1597V12.008H10.0597V14Z"
36+
fill="{getFill()}" />
37+
</g>
38+
39+
<g if="{ props.dataIcon == 'youtube' }">
40+
<path fill-rule="evenodd" clip-rule="evenodd"
41+
d="M16.0323 2.88814C16.8068 3.10169 17.4168 3.7309 17.6238 4.52995C18 5.97823 18 9 18 9C18 9 18 12.0218 17.6238 13.4699C17.4168 14.2689 16.8068 14.8983 16.0323 15.1119C14.6286 15.5 8.99993 15.5 8.99993 15.5C8.99993 15.5 3.37123 15.5 1.9675 15.1119C1.19304 14.8983 0.583035 14.2689 0.376047 13.4699C0 12.0218 0 9 0 9C0 9 0 5.97823 0.376047 4.52995C0.583035 3.7309 1.19304 3.10169 1.9675 2.88814C3.37123 2.5 8.99993 2.5 8.99993 2.5C8.99993 2.5 14.6286 2.5 16.0323 2.88814ZM11.8977 9.19613L7.21106 12.0624V6.32983L11.8977 9.19613Z"
42+
fill="{getFill()}" />
43+
</g>
44+
45+
<g if="{ props.dataIcon == 'training' }">
46+
<path fill-rule="evenodd" clip-rule="evenodd"
47+
d="M11 4.5C11 5.42826 10.6313 6.3185 9.97487 6.97487C9.3185 7.63125 8.42826 8 7.5 8C6.57174 8 5.6815 7.63125 5.02513 6.97487C4.36875 6.3185 4 5.42826 4 4.5C4 3.57174 4.36875 2.6815 5.02513 2.02513C5.6815 1.36875 6.57174 1 7.5 1C8.42826 1 9.3185 1.36875 9.97487 2.02513C10.6313 2.6815 11 3.57174 11 4.5ZM26.0921 21C26.8633 21 27.6029 20.5665 28.1483 20.0245C28.6936 19.4824 29 18.7472 29 17.9807V6.60004C29 5.83348 28.6936 5.09831 28.1483 4.55627C27.6029 4.01423 27.0616 4 26.2903 4H12.5C13.0003 4.86669 13.0002 5.95114 13 6.94877L13 7H26.0921V17.9807H15V21H26.0921ZM21 9V12L12 12.0194V29H9V21H6V29L3 29V19.0646H1V12.0194C1 11.2528 1.30637 10.5177 1.85172 9.97563C2.39706 9.43359 3.22876 9 4 9H21Z"
48+
fill="{getFill()}" />
49+
</g>
4950

50-
<svg if="{ props.dataIcon == 'training' }" width="30" height="30" viewBox="0 0 30 30" fill="none"
51-
xmlns="http://www.w3.org/2000/svg">
52-
<path fill-rule="evenodd" clip-rule="evenodd"
53-
d="M11 4.5C11 5.42826 10.6313 6.3185 9.97487 6.97487C9.3185 7.63125 8.42826 8 7.5 8C6.57174 8 5.6815 7.63125 5.02513 6.97487C4.36875 6.3185 4 5.42826 4 4.5C4 3.57174 4.36875 2.6815 5.02513 2.02513C5.6815 1.36875 6.57174 1 7.5 1C8.42826 1 9.3185 1.36875 9.97487 2.02513C10.6313 2.6815 11 3.57174 11 4.5ZM26.0921 21C26.8633 21 27.6029 20.5665 28.1483 20.0245C28.6936 19.4824 29 18.7472 29 17.9807V6.60004C29 5.83348 28.6936 5.09831 28.1483 4.55627C27.6029 4.01423 27.0616 4 26.2903 4H12.5C13.0003 4.86669 13.0002 5.95114 13 6.94877L13 7H26.0921V17.9807H15V21H26.0921ZM21 9V12L12 12.0194V29H9V21H6V29L3 29V19.0646H1V12.0194C1 11.2528 1.30637 10.5177 1.85172 9.97563C2.39706 9.43359 3.22876 9 4 9H21Z"
54-
fill="currentColor" />
5551
</svg>
5652

53+
<template if="{props.dataFillGradient}">
54+
<svg class="u-screen-reader-text">
55+
<defs>
56+
<linearGradient id="gradient-{id}" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
57+
<stop stop-color="#00DC8D" />
58+
<stop offset="1" stop-color="#00B2FF" />
59+
</linearGradient>
60+
</defs>
61+
</svg>
62+
</template>
63+
5764
<style>
5865
:host {
5966
display: inline-flex;
6067
justify-content: flex-start;
6168
align-items: center;
62-
width: 1em;
63-
height: auto;
6469
vertical-align: baseline;
6570
}
6671
6772
svg {
6873
width: 1em;
6974
height: 1em;
7075
}
76+
</style>
7177

72-
svg * {
73-
transition: fill 0.2s;
78+
<script>
79+
export default function UiIcon() {
80+
return {
81+
getFill() {
82+
return this.props.dataFillGradient ? `url(#gradient-${this.id})` : 'currentColor'
83+
}
84+
}
7485
}
75-
</style>
86+
</script>
7687
</ui-icon>

0 commit comments

Comments
 (0)