logo-with-variants
Twórz komponenty logo z wariantami ikon, wordmarków i trybów jasny/ciemny
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do tworzenia komponentów logo z obsługą wielu wariantów (ikona, wordmark, logo) i trybów jasny/ciemny. Idealna dla projektów, które następują wzorzec Clerk w kolekcji Elements. Automatycznie konwertuje pliki SVG na komponenty React z typami TypeScript, obsługą motywów i dostępnością. Użyj, gdy masz pliki SVG logo i chcesz zbudować wariantowy komponent zgodny ze standardami projektu.
Jak używać
Przygotuj pliki SVG swoich logo — powinieneś mieć warianty dla ikony, wordmarku i logo, opcjonalnie z wersjami dla trybu jasnego i ciemnego (nazwy plików z sufiksem -dark.svg lub -light.svg). Umieść je w katalogu public/test/ lub przygotuj ścieżki do nich.
Aktywuj skill i podaj użytkownikowi pliki SVG. Skill przeanalizuje każdy plik, identyfikując typ wariantu, kolory, wymiary i viewBox. Jeśli pliki zawierają wersje dla różnych trybów, skill je automatycznie rozpozna.
Skill utworzy plik komponentu w lokalizacji src/components/ui/logos/{nazwa}.tsx. Komponent będzie zawierać interfejs props z opcjami variant (icon, logo, wordmark) i mode (dark, light), wraz z obiektem COLORS do zarządzania kolorami dla każdego trybu.
Skill skonwertuje każdy plik SVG na JSX — zmieni atrybuty SVG na notację camelCase (fill-rule na fillRule, stroke-width na strokeWidth), zastąpi twarde kolory zmiennymi z obiektu COLORS i zachowa viewBox oraz wymiary. Doda również tag title dla dostępności.
Skill utworzy strukturę rejestracji w katalogu registry/default/blocks/logos/{nazwa}-logo/ z niezbędnymi plikami bloku. Domyślnym wariantem będzie wordmark (główne logo).
Sprawdź wygenerowany komponent — porównaj go ze wzorcem w src/components/ui/logos/clerk.tsx, aby upewnić się, że struktura i obsługa trybów są prawidłowe. Komponent jest gotowy do użycia w projekcie Elements.