Skip to content
This repository was archived by the owner on Jun 23, 2023. It is now read-only.

WIP: feat(svgs): Refactor raw SVG paths into maintainable and reusable component #371

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

WIP: feat(svgs): Refactor raw SVG paths into maintainable and reusable component #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/assets/svg-icons.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"blockchain": [
"M23.3472 8.84298C24.6806 8.07317 24.6806 6.14865 23.3472 5.37886L15.0304 0.577324C14.4116 0.220073 13.6493 0.220077 13.0305 0.577333L4.71387 5.37887C3.38053 6.14866 3.38052 8.07316 4.71384 8.84297L13.0304 13.6447C13.6493 14.0019 14.4117 14.0019 15.0305 13.6447L23.3472 8.84298Z",
"M14.9243 26.5359C14.9243 28.0755 16.591 29.0378 17.9243 28.268L26.2443 23.4644C26.8631 23.1072 27.2443 22.4469 27.2443 21.7324V12.1218C27.2443 10.5822 25.5777 9.61992 24.2444 10.3897L15.9243 15.1931C15.3055 15.5504 14.9243 16.2106 14.9243 16.9252V26.5359Z",
"M3.8164 10.3897C2.48306 9.61995 0.816406 10.5822 0.816406 12.1218V21.7324C0.816406 22.4469 1.1976 23.1072 1.81639 23.4644L10.1362 28.268C11.4695 29.0378 13.1362 28.0755 13.1362 26.5359V16.9252C13.1362 16.2106 12.755 15.5504 12.1362 15.1931L3.8164 10.3897Z"
],
"left-caret": "M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
}
56 changes: 7 additions & 49 deletions src/components/BitcoinWallet.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,18 +231,7 @@
class="card-link text-muted"
v-on:click.stop.prevent="reset"
>
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -320,18 +309,7 @@
class="card-link text-muted"
v-on:click.stop.prevent="reset"
>
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -427,18 +405,7 @@
class="card-link text-muted"
v-on:click.stop.prevent="reset"
>
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -475,18 +442,7 @@
class="card-link text-muted"
v-on:click.stop.prevent="reset"
>
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -630,6 +586,7 @@ import QrCode from "@/components/Utility/QrCode.vue";
import CircularCheckmark from "@/components/Utility/CircularCheckmark.vue";
import SatsBtcSwitch from "@/components/Utility/SatsBtcSwitch";
import FeeSelector from "@/components/Utility/FeeSelector";
import SvgIcon from '@/components/Utility/SvgIcon.vue';

export default {
data() {
Expand Down Expand Up @@ -893,7 +850,8 @@ export default {
InputCopy,
CircularCheckmark,
SatsBtcSwitch,
FeeSelector
FeeSelector,
SvgIcon
}
};
</script>
Expand Down
27 changes: 5 additions & 22 deletions src/components/Blockchain.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,27 +70,7 @@
<div class="d-flex w-100 justify-content-between">
<div class="d-flex">
<div class="blockchain-block-icon blockchain-block-icon-loading">
<svg
width="28"
height="30"
viewBox="0 0 28 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.3472 8.84298C24.6806 8.07317 24.6806 6.14865 23.3472 5.37886L15.0304 0.577324C14.4116 0.220073 13.6493 0.220077 13.0305 0.577333L4.71387 5.37887C3.38053 6.14866 3.38052 8.07316 4.71384 8.84297L13.0304 13.6447C13.6493 14.0019 14.4117 14.0019 15.0305 13.6447L23.3472 8.84298Z"
fill="#D3D5DC"
/>
<path
d="M14.9243 26.5359C14.9243 28.0755 16.591 29.0378 17.9243 28.268L26.2443 23.4644C26.8631 23.1072 27.2443 22.4469 27.2443 21.7324V12.1218C27.2443 10.5822 25.5777 9.61992 24.2444 10.3897L15.9243 15.1931C15.3055 15.5504 14.9243 16.2106 14.9243 16.9252V26.5359Z"
fill="#D3D5DC"
/>
<path
d="M3.8164 10.3897C2.48306 9.61995 0.816406 10.5822 0.816406 12.1218V21.7324C0.816406 22.4469 1.1976 23.1072 1.81639 23.4644L10.1362 28.268C11.4695 29.0378 13.1362 28.0755 13.1362 26.5359V16.9252C13.1362 16.2106 12.755 15.5504 12.1362 15.1931L3.8164 10.3897Z"
fill="#D3D5DC"
/>
</svg>

<svg-icon name="blockchain" color="#D3D5DC" width="28" height="30" />
<div class="blockchain-block-icon-chainlink"></div>
<div class="blockchain-block-icon-bg"></div>
</div>
Expand All @@ -117,6 +97,7 @@
<script>
import moment from "moment";
import { mapState } from "vuex";
import SvgIcon from '@/components/Utility/SvgIcon.vue';

export default {
data() {
Expand Down Expand Up @@ -190,7 +171,9 @@ export default {
}
},

components: {}
components: {
SvgIcon
}
};
</script>

Expand Down
95 changes: 10 additions & 85 deletions src/components/LightningWallet.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,18 +215,7 @@
<!-- Back Button -->
<div class="pb-3">
<a href="#" class="card-link text-muted" v-on:click.stop.prevent="reset">
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -271,18 +260,7 @@
<!-- Back Button -->
<div class="pb-3">
<a href="#" class="card-link text-muted" v-on:click.stop.prevent="reset">
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -311,18 +289,7 @@
<!-- Back Button -->
<div class="pb-3">
<a href="#" class="card-link text-muted" v-on:click.stop.prevent="reset">
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -372,18 +339,7 @@
<!-- Back Button -->
<div class="pb-3">
<a href="#" class="card-link text-muted" v-on:click.stop.prevent="reset">
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -429,18 +385,7 @@
<!-- Back Button -->
<div class="pb-3">
<a href="#" class="card-link text-muted" v-on:click.stop.prevent="reset">
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -470,18 +415,7 @@
<!-- Back Button -->
<div class="pb-3">
<a href="#" class="card-link text-muted" v-on:click.stop.prevent="reset">
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -524,18 +458,7 @@
<!-- Back Button -->
<div class="pb-3">
<a href="#" class="card-link text-muted" v-on:click.stop.prevent="reset">
<svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon name="left-caret" color="#C3C6D1" width="7" height="13" />
Back
</a>
</div>
Expand Down Expand Up @@ -686,6 +609,7 @@ import InputCopy from "@/components/Utility/InputCopy";
import QrCode from "@/components/Utility/QrCode.vue";
import CircularCheckmark from "@/components/Utility/CircularCheckmark.vue";
import SatsBtcSwitch from "@/components/Utility/SatsBtcSwitch";
import SvgIcon from '@/components/Utility/SvgIcon.vue';

export default {
data() {
Expand Down Expand Up @@ -1036,7 +960,8 @@ export default {
QrCode,
InputCopy,
CircularCheckmark,
SatsBtcSwitch
SatsBtcSwitch,
SvgIcon
}
};
</script>
Expand Down
26 changes: 26 additions & 0 deletions src/components/Utility/SvgIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<svg class="icon"
:style="{ width: `${width}px`, height: `${height}px` }"
:viewBox="`0 0 ${width} ${height}`">
<path v-for="(path, index) in svgPaths()" :key="index" :d="path" :fill="color" />
</svg>
</template>

<script>
import icons from '@/assets/svg-icons.json';

export default {
name: 'SvgIcon',
props: {
name: String,
color: String,
width: String,
height: String
},
methods: {
svgPaths() {
return [icons[this.name]].flat();
}
},
};
</script>
15 changes: 3 additions & 12 deletions src/views/AppStoreApp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,8 @@
<router-link
to="/app-store"
class="card-link text-muted d-flex align-items-center mb-4"
><svg
width="7"
height="13"
viewBox="0 0 7 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-1"
>
<path
d="M6.74372 11.4153C7.08543 11.7779 7.08543 12.3659 6.74372 12.7285C6.40201 13.0911 5.84799 13.0911 5.50628 12.7285L0.256283 7.15709C-0.0749738 6.80555 -0.0865638 6.23951 0.229991 5.87303L5.04249 0.301606C5.36903 -0.0764332 5.92253 -0.101971 6.27876 0.244565C6.63499 0.591101 6.65905 1.17848 6.33251 1.55652L2.08612 6.47256L6.74372 11.4153Z"
fill="#C3C6D1"
/>
</svg>
<svg-icon class="mr-1" name="left-caret" color="#C3C6D1" width="7" height="13" />
Back</router-link
>
<div
Expand Down Expand Up @@ -196,6 +185,7 @@ import { mapState } from "vuex";

import CardWidget from "@/components/CardWidget";
import InputCopy from "@/components/Utility/InputCopy";
import SvgIcon from '@/components/Utility/SvgIcon.vue';

export default {
data() {
Expand Down Expand Up @@ -260,6 +250,7 @@ export default {
components: {
CardWidget,
InputCopy,
SvgIcon
},
};
</script>
Expand Down