sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(icons): replace hand-rolled inline SVGs with Lucide (cart, selectors, carousel)

Browse Source 
Cart: trash/X/plus/minus/lock icons replaced with app-icon. Removed
the standalone EmptyCartIconComponent entirely - it was a duplicate
80px shopping-cart glyph with no unique illustration, only ever used
in one place; now app-icon name="cart" inline.

Language/region selectors: dropdown chevrons (duplicated 3x with
identical path data across two components) unified on
chevronDown; region pin, locate (crosshair), and globe icons replaced.
New mapPin/locate icons added to the registry.

Items carousel: rating star and add-to-cart icons replaced.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-20 02:45:37 +04:00
parent 6b0ad6455b
commit 3837ddfb2d
12 changed files with 28 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/empty-cart-icon/empty-cart-icon.component.html
View File

@@ -1,5 +0,0 @@
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 4h2l2.5 10.5a2 2 0 0 0 2 1.5H17a2 2 0 0 0 2-1.5L21 7H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="10" cy="19" r="1.5" stroke="currentColor" stroke-width="2"/>
<circle cx="17" cy="19" r="1.5" stroke="currentColor" stroke-width="2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 411 B

7
src/app/components/empty-cart-icon/empty-cart-icon.component.scss
View File

@@ -1,7 +0,0 @@
:host {
display: block;
svg {
color: var(--primary-color);
}
}

9
src/app/components/empty-cart-icon/empty-cart-icon.component.ts
View File

@@ -1,9 +0,0 @@
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-empty-cart-icon',
templateUrl: './empty-cart-icon.component.html',
styleUrls: ['./empty-cart-icon.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class EmptyCartIconComponent {}

10
src/app/components/items-carousel/items-carousel.component.html
View File

@@ -36,9 +36,7 @@
@if (product.rating) {
<div class="item-rating">
<svg width="14" height="14" viewBox="0 0 24 24" fill="#497671" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
</svg>
<app-icon name="star" [size]="14" />
<span class="rating-value">{{ product.rating }}</span>
<span class="rating-count">({{ product.callbacks?.length || 0 }})</span>
</div>
@@ -54,11 +52,7 @@
}
</div>
<button class="cart-icon-btn" (click)="addToCart($event, product)" [title]="'carousel.addToCart' | translate">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
<line x1="3" y1="6" x2="21" y2="6"></line>
<path d="M16 10a4 4 0 0 1-8 0"></path>
</svg>
<app-icon name="cart" [size]="16" />
</button>
</div>
</div>

3
src/app/components/items-carousel/items-carousel.component.ts
View File

@@ -11,11 +11,12 @@ import { LanguageService } from '../../services/language.service';
import { LangRoutePipe } from '../../pipes/lang-route.pipe';
import { TranslatePipe } from '../../i18n/translate.pipe';
import { ProductFacade } from '../../facades/platform/product.facade';
import { IconComponent } from '../../shared/ui/icon/icon.component';
@Component({
selector: 'app-items-carousel',
templateUrl: './items-carousel.component.html',
imports: [DecimalPipe, RouterLink, CarouselModule, ButtonModule, TagModule, LangRoutePipe, TranslatePipe],
imports: [DecimalPipe, RouterLink, CarouselModule, ButtonModule, TagModule, LangRoutePipe, TranslatePipe, IconComponent],
styleUrls: ['./items-carousel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})

4
src/app/components/language-selector/language-selector.component.html
View File

@@ -4,9 +4,7 @@
[alt]="languageService.getCurrentLanguage()?.name"
class="language-flag">
<span class="language-code">{{ languageService.getCurrentLanguage()?.code?.toUpperCase() }}</span>
<svg class="dropdown-arrow" [class.rotated]="dropdownOpen" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<app-icon name="chevronDown" [size]="14" [class.rotated]="dropdownOpen" class="dropdown-arrow" />
</button>
<div class="language-dropdown" [class.open]="dropdownOpen">

3
src/app/components/language-selector/language-selector.component.ts
View File

@@ -1,9 +1,10 @@
import { Component, HostListener, ElementRef, ChangeDetectionStrategy } from '@angular/core';
import { LanguageService, Language, Currency } from '../../services/language.service';
import { IconComponent } from '../../shared/ui/icon/icon.component';
@Component({
selector: 'app-language-selector',
imports: [],
imports: [IconComponent],
templateUrl: './language-selector.component.html',
styleUrls: ['./language-selector.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush

20
src/app/components/region-selector/region-selector.component.html
View File

@@ -1,9 +1,6 @@
<div class="region-selector">
<button class="region-trigger" (click)="toggleDropdown()" [class.active]="dropdownOpen()">
<svg class="pin-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<app-icon name="mapPin" [size]="16" class="pin-icon" />
<span class="region-name">
@if (detecting()) {
<span class="detecting">...</span>
@@ -13,10 +10,7 @@
{{ 'location.allRegions' | translate }}
}
</span>
<svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
[class.rotated]="dropdownOpen()">
<path d="M6 9l6 6 6-6"></path>
</svg>
<app-icon name="chevronDown" [size]="14" [class.rotated]="dropdownOpen()" class="chevron" />
</button>
@if (dropdownOpen()) {
@@ -25,20 +19,14 @@
<span>{{ 'location.chooseRegion' | translate }}</span>
@if (!detecting()) {
<button class="detect-btn" (click)="detectLocation()" title="{{ 'location.detectAuto' | translate }}">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path d="M12 2v4M12 18v4M2 12h4M18 12h4"></path>
</svg>
<app-icon name="locate" [size]="14" />
</button>
}
</div>
<div class="region-list">
<button class="region-option" [class.selected]="!region()" (click)="selectGlobal()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
<app-icon name="globe" [size]="14" />
<span>{{ 'location.allRegions' | translate }}</span>
</button>

3
src/app/components/region-selector/region-selector.component.ts
View File

@@ -2,10 +2,11 @@ import { Component, ChangeDetectionStrategy, inject, signal, HostListener } from
import { LocationService } from '../../services/location.service';
import { Region } from '../../models/location.model';
import { TranslatePipe } from '../../i18n/translate.pipe';
import { IconComponent } from '../../shared/ui/icon/icon.component';
@Component({
selector: 'app-region-selector',
imports: [TranslatePipe],
imports: [TranslatePipe, IconComponent],
templateUrl: './region-selector.component.html',
styleUrls: ['./region-selector.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush