Browse Source
Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/pulls/157pull/154/head^2
4 changed files with 85 additions and 296 deletions
@ -1,75 +0,0 @@ |
|||
{ |
|||
"warning": { |
|||
"fillRule": "evenodd", |
|||
"d": "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", |
|||
"clipRule": "evenodd" |
|||
}, |
|||
"spinner": { |
|||
"d": "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" |
|||
}, |
|||
"chart": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" |
|||
}, |
|||
"plus": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M12 4v16m8-8H4" |
|||
}, |
|||
"settings": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" |
|||
}, |
|||
"settingsDot": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M15 12a3 3 0 11-6 0 3 3 0 016 0z" |
|||
}, |
|||
"lock": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" |
|||
}, |
|||
"download": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" |
|||
}, |
|||
"check": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" |
|||
}, |
|||
"edit": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" |
|||
}, |
|||
"trash": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" |
|||
}, |
|||
"plusCircle": { |
|||
"strokeLinecap": "round", |
|||
"strokeLinejoin": "round", |
|||
"strokeWidth": "2", |
|||
"d": "M12 6v6m0 0v6m0-6h6m-6 0H6" |
|||
}, |
|||
"info": { |
|||
"fillRule": "evenodd", |
|||
"d": "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", |
|||
"clipRule": "evenodd" |
|||
} |
|||
} |
|||
@ -1,90 +0,0 @@ |
|||
<template> |
|||
<svg |
|||
v-if="iconData" |
|||
:class="svgClass" |
|||
:fill="fill" |
|||
:stroke="stroke" |
|||
:viewBox="viewBox" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
> |
|||
<path v-for="(path, index) in iconData.paths" :key="index" v-bind="path" /> |
|||
</svg> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Prop, Vue } from "vue-facing-decorator"; |
|||
import icons from "../assets/icons.json"; |
|||
import { logger } from "../utils/logger"; |
|||
|
|||
/** |
|||
* Icon path interface |
|||
*/ |
|||
interface IconPath { |
|||
d: string; |
|||
fillRule?: string; |
|||
clipRule?: string; |
|||
strokeLinecap?: string; |
|||
strokeLinejoin?: string; |
|||
strokeWidth?: string | number; |
|||
fill?: string; |
|||
stroke?: string; |
|||
} |
|||
|
|||
/** |
|||
* Icon data interface |
|||
*/ |
|||
interface IconData { |
|||
paths: IconPath[]; |
|||
} |
|||
|
|||
/** |
|||
* Icons JSON structure |
|||
*/ |
|||
interface IconsJson { |
|||
[key: string]: IconPath | IconData; |
|||
} |
|||
|
|||
/** |
|||
* Icon Renderer Component |
|||
* |
|||
* This component loads SVG icon definitions from a JSON file and renders them |
|||
* as SVG elements. It provides a clean way to use icons without cluttering |
|||
* templates with long SVG path definitions. |
|||
* |
|||
* @author Matthew Raymer |
|||
* @version 1.0.0 |
|||
* @since 2024 |
|||
*/ |
|||
@Component({ |
|||
name: "IconRenderer", |
|||
}) |
|||
export default class IconRenderer extends Vue { |
|||
@Prop({ required: true }) readonly iconName!: string; |
|||
@Prop({ default: "h-5 w-5" }) readonly svgClass!: string; |
|||
@Prop({ default: "none" }) readonly fill!: string; |
|||
@Prop({ default: "currentColor" }) readonly stroke!: string; |
|||
@Prop({ default: "0 0 24 24" }) readonly viewBox!: string; |
|||
|
|||
/** |
|||
* Get the icon data for the specified icon name |
|||
* |
|||
* @returns {IconData | null} The icon data object or null if not found |
|||
*/ |
|||
get iconData(): IconData | null { |
|||
const icon = (icons as IconsJson)[this.iconName]; |
|||
if (!icon) { |
|||
logger.warn(`Icon "${this.iconName}" not found in icons.json`); |
|||
return null; |
|||
} |
|||
|
|||
// Convert single path to array format for consistency |
|||
if ("d" in icon) { |
|||
return { |
|||
paths: [icon as IconPath], |
|||
}; |
|||
} |
|||
|
|||
return icon as IconData; |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue