izawartka/td2-visualizer
izawartka/td2-visualizer
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Icon tweaks

Browse Source 
*Moved TrackHoverInfo icons to src/icons/track-hover-info
*Tweaked TrackHoverInfo css
-Removed width and height icon params
This commit is contained in:
izawartka 2025-08-15 20:28:36 +02:00
parent f5bc06ad8b
commit d023eb9dad
8 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/map/track-hover-info/TrackHoverInfo.css
View File

@ -12,6 +12,11 @@
padding: 1em;
}
.track-hover-info-popup svg {
width: 1.2em;
height: 1.2em;
}
.track-hover-info-popup table {
border-spacing: 2px;
}

12
src/icons/index.js
View File

@ -1,6 +1,6 @@
export { HashIcon } from "./hash";
export { SpeedIcon } from "./speed";
export { LightningIcon } from "./lightning";
export { QuestionMarkIcon } from "./question-mark";
export { SlopeIcon } from "./slope";
export { RadiusIcon } from "./radius";
export { HashIcon } from "./track-hover-info/hash";
export { SpeedIcon } from "./track-hover-info/speed";
export { LightningIcon } from "./track-hover-info/lightning";
export { QuestionMarkIcon } from "./track-hover-info/question-mark";
export { SlopeIcon } from "./track-hover-info/slope";
export { RadiusIcon } from "./track-hover-info/radius";

4
src/icons/hash.js → src/icons/track-hover-info/hash.js
View File

@ -1,5 +1,5 @@
export const HashIcon = ({width = 100, height = 100, color = '#aaa', strokeWidth = 3}) => (
<svg width={width} height={height} version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
export const HashIcon = ({color = '#aaa', strokeWidth = 3}) => (
<svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
<g stroke={color} strokeLinecap="round" strokeWidth={strokeWidth}>
<path d="m6.35 8.4667h15.875"/>
<path d="m4.2333 17.992h15.875"/>

4
src/icons/lightning.js → src/icons/track-hover-info/lightning.js
View File

@ -1,5 +1,5 @@
export const LightningIcon = ({width = 100, height = 100, color = '#aaa', strokeWidth = 3}) => (
<svg width={width} height={height} version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
export const LightningIcon = ({color = '#aaa', strokeWidth = 3}) => (
<svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
<g strokeLinecap="round" strokeLinejoin="round">
<path d="m16.377 3.064-6.7273 9.5424 7.1597 0.04677-5.8532 8.1012" fill="none" stroke={color} strokeWidth={strokeWidth}/>
<path d="m8.8716 18.291c-0.22686 0.1146-0.38025 0.33628-0.40753 0.58897l-0.62437 5.8411c-0.069133 0.63371 0.63369 1.0593 1.1632 0.70442l4.9448-3.304c0.45953-0.30723 0.44017-0.98907-0.03604-1.2697l-4.3225-2.5389c-0.21996-0.12871-0.49022-0.13693-0.71759-0.021836z" fill={color}/>

4
src/icons/question-mark.js → src/icons/track-hover-info/question-mark.js
View File

@ -1,5 +1,5 @@
export const QuestionMarkIcon = ({width = 100, height = 100, color = '#aaa', strokeWidth = 3}) => (
<svg width={width} height={height} version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
export const QuestionMarkIcon = ({color = '#aaa', strokeWidth = 3}) => (
<svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
<path d="m12.715 4.6602c1.6393 1e-7 2.8139 0.388 3.6543 1.0996l0.0039 0.00391 2e-3 0.00195c0.85746 0.71341 1.2441 1.5491 1.2441 2.7559 0 0.70837-0.12471 1.3057-0.35742 1.8184-2.41e-4 5.3e-4 2.41e-4 0.0014 0 2e-3 -0.24973 0.54115-0.57292 1.0128-0.97461 1.4297-0.4207 0.42821-0.90971 0.83512-1.4727 1.2207-0.58361 0.39973-1.2056 0.78991-1.8652 1.168l-0.42774 0.24414v2.4336h-0.51953v-2.4414c0.42324-0.24294 0.84668-0.4881 1.3164-0.76367 0.66542-0.38563 1.2263-0.78504 1.6836-1.2129 0.52804-0.47491 0.9591-0.9798 1.2754-1.5234l2e-3 -2e-3v-0.0039c0.35758-0.62576 0.50977-1.3651 0.50976-2.1816 0-1.1248-0.44975-2.1542-1.3066-2.7695-0.80104-0.5883-1.8121-0.85938-2.9414-0.85938-0.98217 0-1.9293 0.15701-2.8242 0.4707h-0.00195c-0.35427 0.12547-0.57509 0.26783-0.875 0.39844v-0.625c0.44446-0.14128 0.88216-0.28544 1.5077-0.40821h0.0059c0.84466-0.17207 1.6325-0.25586 2.3613-0.25586zm-0.82422 16.223h0.83008v0.91602h-0.83008z" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth}/>
</svg>
);

4
src/icons/radius.js → src/icons/track-hover-info/radius.js
View File

@ -1,5 +1,5 @@
export const RadiusIcon = ({width = 100, height = 100, color = '#000', strokeWidth = 3}) => (
<svg width={width} height={height} version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
export const RadiusIcon = ({color = '#000', strokeWidth = 3}) => (
<svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth}>
<path d="m5.447 21.439c8.7852 0 16.375-4.9776 16.454-15.457"/>
<path d="m6.0139 6.4035 4.6883 10.447"/>

4
src/icons/slope.js → src/icons/track-hover-info/slope.js
View File

@ -1,5 +1,5 @@
export const SlopeIcon = ({width = 100, height = 100, color = '#000', strokeWidth = 3}) => (
<svg width={width} height={height} version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
export const SlopeIcon = ({color = '#000', strokeWidth = 3}) => (
<svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round">
<path d="m3.5064 21.443c6.758-0.83913 13.438-0.58929 19.6-6.9228" strokeWidth={strokeWidth}/>
<path d="m7.6444 10.614c0.37591 0.7323 0.50003 1.3563 0.37238 1.8721-0.12439 0.51409-0.47754 0.92049-1.0595 1.2192-0.595 0.30542-1.136 0.358-1.6229 0.15772-0.48696-0.20028-0.91755-0.66493-1.2918-1.394-0.37591-0.7323-0.50003-1.3563-0.37238-1.8721 0.12766-0.51577 0.48244-0.92301 1.0644-1.2217 0.59173-0.30375 1.1319-0.35385 1.6205-0.1503 0.48863 0.20354 0.91839 0.66657 1.2893 1.3891zm2.9965 5.7856 0.07682-9.2652zm6.5407-5.967c0.37591 0.7323 0.50003 1.3563 0.37238 1.8721-0.12766 0.51577-0.48244 0.92301-1.0644 1.2217-0.59173 0.30375-1.1319 0.35385-1.6205 0.1503-0.48863-0.20354-0.91839-0.66656-1.2893-1.3891-0.37591-0.7323-0.50167-1.3555-0.37728-1.8696 0.12766-0.51577 0.48244-0.92301 1.0644-1.2217 0.595-0.30542 1.136-0.358 1.6229-0.15772 0.48696 0.20028 0.91755 0.66493 1.2918 1.394zm5.5951-2.9148c0.37591 0.7323 0.50003 1.3563 0.37238 1.8721-0.12766 0.51577-0.48244 0.92301-1.0644 1.2217-0.59173 0.30375-1.1319 0.35385-1.6205 0.1503-0.48863-0.20354-0.91839-0.66656-1.2893-1.3891-0.37591-0.7323-0.50167-1.3555-0.37728-1.8696 0.12766-0.51577 0.48244-0.92301 1.0644-1.2217 0.595-0.30542 1.136-0.358 1.6229-0.15772 0.48696 0.20028 0.91755 0.66493 1.2918 1.394z" strokeWidth={strokeWidth * 0.7}/>

4
src/icons/speed.js → src/icons/track-hover-info/speed.js
View File

@ -1,5 +1,5 @@
export const SpeedIcon = ({width = 100, height = 100, color = '#aaa', strokeWidth = 3}) => (
<svg width={width} height={height} version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
export const SpeedIcon = ({color = '#aaa', strokeWidth = 3}) => (
<svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke={color} strokeLinecap="round">
<circle cx="13.112" cy="13.112" r="8.9958" strokeWidth={strokeWidth}/>
<path d="m13.229 13.229 4.2063-3.3844" strokeWidth={strokeWidth}/>