feat: change icons for diagnostic

This commit is contained in:
divocat
2025-10-13 21:32:01 +03:00
parent a7150f7143
commit 0fba31c10a
8 changed files with 180 additions and 120 deletions

View File

@@ -1,5 +1,5 @@
export * from './renderLoaderCircleIcon24';
export * from './renderShieldAlertIcon24';
export * from './renderShieldCheckIcon24';
export * from './renderShieldIcon24';
export * from './renderShieldXIcon24';
export * from './renderCircleAlertIcon24';
export * from './renderCircleCheckIcon24';
export * from './renderCircleSlashIcon24';
export * from './renderCircleXIcon24';

View File

@@ -0,0 +1,39 @@
import { svgEl } from '../helpers';
export function renderCircleAlertIcon24() {
const NS = 'http://www.w3.org/2000/svg';
return svgEl(
'svg',
{
xmlns: NS,
width: '24',
height: '24',
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
'stroke-width': '2',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
class: 'lucide lucide-circle-alert-icon lucide-circle-alert',
},
[
svgEl('circle', {
cx: '12',
cy: '12',
r: '10',
}),
svgEl('line', {
x1: '12',
y1: '8',
x2: '12',
y2: '12',
}),
svgEl('line', {
x1: '12',
y1: '16',
x2: '12.01',
y2: '16',
}),
],
);
}

View File

@@ -1,6 +1,6 @@
import { svgEl } from '../helpers';
export function renderShieldIcon24() {
export function renderCircleCheckIcon24() {
const NS = 'http://www.w3.org/2000/svg';
return svgEl(
'svg',
@@ -14,11 +14,16 @@ export function renderShieldIcon24() {
'stroke-width': '2',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
class: 'lucide lucide-shield',
class: 'lucide lucide-circle-check-icon lucide-circle-check',
},
[
svgEl('circle', {
cx: '12',
cy: '12',
r: '10',
}),
svgEl('path', {
d: 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z',
d: 'M9 12l2 2 4-4',
}),
],
);

View File

@@ -1,6 +1,6 @@
import { svgEl } from '../helpers';
export function renderShieldAlertIcon24() {
export function renderCircleSlashIcon24() {
const NS = 'http://www.w3.org/2000/svg';
return svgEl(
'svg',
@@ -14,14 +14,20 @@ export function renderShieldAlertIcon24() {
'stroke-width': '2',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
class: 'lucide lucide-shield-alert',
class: 'lucide lucide-circle-slash-icon lucide-circle-slash',
},
[
svgEl('path', {
d: 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z',
svgEl('circle', {
cx: '12',
cy: '12',
r: '10',
}),
svgEl('line', {
x1: '9',
y1: '15',
x2: '15',
y2: '9',
}),
svgEl('path', { d: 'M12 8v4' }),
svgEl('path', { d: 'M12 16h.01' }),
],
);
}

View File

@@ -1,6 +1,6 @@
import { svgEl } from '../helpers';
export function renderShieldCheckIcon24() {
export function renderCircleXIcon24() {
const NS = 'http://www.w3.org/2000/svg';
return svgEl(
'svg',
@@ -14,13 +14,20 @@ export function renderShieldCheckIcon24() {
'stroke-width': '2',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
class: 'lucide lucide-shield-check',
class: 'lucide lucide-circle-x-icon lucide-circle-x',
},
[
svgEl('path', {
d: 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z',
svgEl('circle', {
cx: '12',
cy: '12',
r: '10',
}),
svgEl('path', {
d: 'M15 9L9 15',
}),
svgEl('path', {
d: 'M9 9L15 15',
}),
svgEl('path', { d: 'm9 12 2 2 4-4' }),
],
);
}

View File

@@ -1,27 +0,0 @@
import { svgEl } from '../helpers';
export function renderShieldXIcon24() {
const NS = 'http://www.w3.org/2000/svg';
return svgEl(
'svg',
{
xmlns: NS,
width: '24',
height: '24',
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
'stroke-width': '2',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
class: 'lucide lucide-shield-x',
},
[
svgEl('path', {
d: 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z',
}),
svgEl('path', { d: 'm14.5 9.5-5 5' }),
svgEl('path', { d: 'm9.5 9.5 5 5' }),
],
);
}

View File

@@ -1,9 +1,9 @@
import {
renderCircleAlertIcon24,
renderCircleCheckIcon24,
renderCircleSlashIcon24,
renderCircleXIcon24,
renderLoaderCircleIcon24,
renderShieldAlertIcon24,
renderShieldCheckIcon24,
renderShieldIcon24,
renderShieldXIcon24,
} from '../../../icons';
import { IDiagnosticsChecksStoreItem } from '../../../store';
@@ -52,7 +52,7 @@ function renderLoadingState(props: IRenderCheckSectionProps) {
function renderWarningState(props: IRenderCheckSectionProps) {
const iconWrap = E('span', { class: 'pdk_diagnostic_alert__icon' });
iconWrap.appendChild(renderShieldAlertIcon24());
iconWrap.appendChild(renderCircleAlertIcon24());
return E(
'div',
@@ -75,7 +75,7 @@ function renderWarningState(props: IRenderCheckSectionProps) {
function renderErrorState(props: IRenderCheckSectionProps) {
const iconWrap = E('span', { class: 'pdk_diagnostic_alert__icon' });
iconWrap.appendChild(renderShieldXIcon24());
iconWrap.appendChild(renderCircleXIcon24());
return E(
'div',
@@ -98,7 +98,7 @@ function renderErrorState(props: IRenderCheckSectionProps) {
function renderSuccessState(props: IRenderCheckSectionProps) {
const iconWrap = E('span', { class: 'pdk_diagnostic_alert__icon' });
iconWrap.appendChild(renderShieldCheckIcon24());
iconWrap.appendChild(renderCircleCheckIcon24());
return E(
'div',
@@ -121,7 +121,7 @@ function renderSuccessState(props: IRenderCheckSectionProps) {
function renderSkippedState(props: IRenderCheckSectionProps) {
const iconWrap = E('span', { class: 'pdk_diagnostic_alert__icon' });
iconWrap.appendChild(renderShieldIcon24());
iconWrap.appendChild(renderCircleSlashIcon24());
return E(
'div',