commit 28cbf3073facad24b591ae40c02f30ec8fb0618c
parent 13109144ed96fcf0c47b92e8e9690a1788be37de
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date: Sun, 12 Sep 2021 15:17:01 -0700
Use vue-feather-icons to manage icons
Diffstat:
12 files changed, 65 insertions(+), 25 deletions(-)
diff --git a/package-lock.json b/package-lock.json
@@ -5,11 +5,13 @@
"requires": true,
"packages": {
"": {
+ "name": "running-tools",
"version": "1.0.0",
"dependencies": {
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
+ "vue-feather-icons": "^5.1.0",
"vue-router": "^3.2.0"
},
"devDependencies": {
@@ -3304,6 +3306,11 @@
"node": ">=4"
}
},
+ "node_modules/babel-helper-vue-jsx-merge-props": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+ "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+ },
"node_modules/babel-loader": {
"version": "8.2.2",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
@@ -15820,6 +15827,14 @@
"node": ">=8.0.0"
}
},
+ "node_modules/vue-feather-icons": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/vue-feather-icons/-/vue-feather-icons-5.1.0.tgz",
+ "integrity": "sha512-ZyM2yFGmL9DYLZYHm63KV1zCQOj8czC2LzDSkxoIp9o6zMAOY4yv1FkxbX+XNUwcH3RRrAuvf25Ij7CnUUsQVA==",
+ "dependencies": {
+ "babel-helper-vue-jsx-merge-props": "^2.0.2"
+ }
+ },
"node_modules/vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -19932,6 +19947,11 @@
"babylon": "^6.18.0"
}
},
+ "babel-helper-vue-jsx-merge-props": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+ "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+ },
"babel-loader": {
"version": "8.2.2",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
@@ -30085,6 +30105,14 @@
}
}
},
+ "vue-feather-icons": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/vue-feather-icons/-/vue-feather-icons-5.1.0.tgz",
+ "integrity": "sha512-ZyM2yFGmL9DYLZYHm63KV1zCQOj8czC2LzDSkxoIp9o6zMAOY4yv1FkxbX+XNUwcH3RRrAuvf25Ij7CnUUsQVA==",
+ "requires": {
+ "babel-helper-vue-jsx-merge-props": "^2.0.2"
+ }
+ },
"vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
+ "vue-feather-icons": "^5.1.0",
"vue-router": "^3.2.0"
},
"devDependencies": {
diff --git a/src/App.vue b/src/App.vue
@@ -3,7 +3,7 @@
<header>
<router-link :to="{ name: $route.meta.back }" v-if="$route.meta.back"
class="icon" title="Back">
- <img alt="" src="@/assets/chevron-left.svg"/>
+ <chevron-left-icon/>
</router-link>
<h1 v-if="$route.meta.title">
@@ -22,6 +22,18 @@
</div>
</template>
+<script>
+import { ChevronLeftIcon } from 'vue-feather-icons';
+
+export default {
+ name: 'App',
+
+ components: {
+ ChevronLeftIcon,
+ },
+};
+</script>
+
<style scoped>
header {
background-color: var(--theme);
@@ -36,9 +48,9 @@ header a {
height: 2em;
width: 2em;
}
-header a img {
+header a svg {
padding: 0em;
- filter: invert(0%) !important;
+ color: #000000;
}
h1 {
grid-column: 3;
diff --git a/src/assets/chevron-left.svg b/src/assets/chevron-left.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
diff --git a/src/assets/edit.svg b/src/assets/edit.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -39,7 +39,7 @@ a:focus, .link:focus {
cursor: pointer;
vertical-align: middle;
}
-.icon img {
+.icon svg {
width: 100%;
height: 100%;
padding: 0.3em;
@@ -53,7 +53,7 @@ a:focus, .link:focus {
}
/* element colors */
-body, input, select, button, option {
+body, input, select, button, option, .icon svg {
color: var(--foreground);
}
body {
@@ -118,9 +118,6 @@ a, .link {
--foreground: #e8e8e8;
--link: hsl(210, 100%, 65%);
}
- .icon img {
- filter: invert(90%);
- }
}
/* print media mode */
diff --git a/public/img/icons/icon.svg b/src/assets/icon.svg
diff --git a/src/assets/plus-circle.svg b/src/assets/plus-circle.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
diff --git a/src/assets/rotate-ccw.svg b/src/assets/rotate-ccw.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
diff --git a/src/assets/trash-2.svg b/src/assets/trash-2.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
diff --git a/src/assets/x.svg b/src/assets/x.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
diff --git a/src/components/TargetTable.vue b/src/components/TargetTable.vue
@@ -11,7 +11,7 @@
<th>
<button class="icon" title="Edit Targets" @click="inEditMode=true" v-blur>
- <img alt="" src="@/assets/edit.svg">
+ <edit-icon/>
</button>
</th>
</tr>
@@ -38,7 +38,7 @@
<td colspan="4">
There aren't any targets yet,<br>
click
- <img alt="Edit Targets" src="@/assets/edit.svg">
+ <edit-icon/>
to edit the list of targets
</td>
</tr>
@@ -52,10 +52,10 @@
<th>
<button class="icon" title="Reset Targets" @click="resetTargets" v-blur>
- <img alt="" src="@/assets/rotate-ccw.svg">
+ <rotate-ccw-icon/>
</button>
<button class="icon" title="Close" @click="inEditMode=false" v-blur>
- <img alt="" src="@/assets/x.svg">
+ <x-icon/>
</button>
</th>
</tr>
@@ -79,7 +79,7 @@
<td>
<button class="icon" title="Remove Target" @click="targets.splice(index, 1)" v-blur>
- <img alt="" src="@/assets/trash-2.svg">
+ <trash-2-icon/>
</button>
</td>
</tr>
@@ -110,6 +110,13 @@
</template>
<script>
+import {
+ EditIcon,
+ RotateCcwIcon,
+ Trash2Icon,
+ XIcon,
+} from 'vue-feather-icons';
+
import unitUtils from '@/utils/units';
import storage from '@/utils/localStorage';
@@ -124,6 +131,11 @@ export default {
components: {
DecimalInput,
TimeInput,
+
+ EditIcon,
+ RotateCcwIcon,
+ Trash2Icon,
+ XIcon,
},
directives: {
@@ -317,13 +329,9 @@ table button.icon {
.empty-message td {
text-align: center !important;
}
-.empty-message img {
+.empty-message svg {
height: 1em;
width: 1em;
-}
-@media (prefers-color-scheme: dark) {
- .empty-message img {
- filter: invert(90%);
- }
+ color: var(--foreground);
}
</style>
