Skip to content

Commit 2278aa1

Browse files
essenmitsosseessenmitsosse
committed
feat: unifyied icon system
1 parent 260be92 commit 2278aa1

6 files changed

Lines changed: 82 additions & 58 deletions

File tree

‎app/components/Button/Base.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const props = withDefaults(
1010
* Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
1111
*/
1212
'aria-keyshortcuts'?: never
13+
14+
'classicon'?: string
1315
}>(),
1416
{
1517
type: 'button',
@@ -39,6 +41,11 @@ defineExpose({
3941
:disabled="disabled ? true : undefined"
4042
:aria-keyshortcuts="keyshortcut"
4143
>
44+
<span
45+
v-if="classicon"
46+
:class="[variant === 'tag' ? 'size-3' : 'size-4', classicon]"
47+
aria-hidden="true"
48+
/>
4249
<slot />
4350
<kbd
4451
v-if="keyshortcut"

‎app/components/Link/Base.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ const props = withDefaults(
2020
* Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
2121
*/
2222
'aria-keyshortcuts'?: never
23+
24+
'classicon'?: string
2325
} &
2426
/** This makes sure the link always has either `to` or `href` */
2527
(Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
@@ -61,6 +63,11 @@ const props = withDefaults(
6163
:href="href"
6264
:aria-keyshortcuts="keyshortcut"
6365
>
66+
<span
67+
v-if="classicon"
68+
:class="[variant === 'tag' ? 'size-3' : 'size-4', classicon]"
69+
aria-hidden="true"
70+
/>
6471
<slot />
6572
<kbd
6673
v-if="keyshortcut"

‎app/components/Package/MetricsBadges.vue‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,21 @@ const typesHref = computed(() => {
5858
<!-- TypeScript types badge -->
5959
<li v-if="!props.isBinary" class="contents">
6060
<TooltipApp :text="typesTooltip">
61-
<LinkBase v-if="typesHref" variant="tag" :to="typesHref">
62-
<span class="w-3 h-3 i-carbon-checkmark" aria-hidden="true" />
61+
<LinkBase v-if="typesHref" variant="tag" :to="typesHref" classicon="i-carbon-checkmark">
6362
{{ $t('package.metrics.types_label') }}
6463
</LinkBase>
65-
<TagStatic v-else :variant="hasTypes ? 'default' : 'disabled'" :tabindex="0">
66-
<span
67-
v-if="isLoading"
68-
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
69-
aria-hidden="true"
70-
/>
71-
<span
72-
v-else
73-
class="w-3 h-3"
74-
:class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
75-
aria-hidden="true"
76-
/>
64+
<TagStatic
65+
v-else
66+
:variant="hasTypes && !isLoading ? 'default' : 'disabled'"
67+
:tabindex="0"
68+
:classicon="
69+
isLoading
70+
? 'i-carbon-circle-dash motion-safe:animate-spin'
71+
: hasTypes
72+
? 'i-carbon-checkmark'
73+
: 'i-carbon-close'
74+
"
75+
>
7776
{{ $t('package.metrics.types_label') }}
7877
</TagStatic>
7978
</TooltipApp>
@@ -84,18 +83,17 @@ const typesHref = computed(() => {
8483
<TooltipApp
8584
:text="isLoading ? '' : hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
8685
>
87-
<TagStatic tabindex="0" :variant="hasEsm && !isLoading ? 'default' : 'disabled'">
88-
<span
89-
v-if="isLoading"
90-
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
91-
aria-hidden="true"
92-
/>
93-
<span
94-
v-else
95-
class="w-3 h-3"
96-
:class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
97-
aria-hidden="true"
98-
/>
86+
<TagStatic
87+
tabindex="0"
88+
:variant="hasEsm && !isLoading ? 'default' : 'disabled'"
89+
:classicon="
90+
isLoading
91+
? 'i-carbon-circle-dash motion-safe:animate-spin'
92+
: hasEsm
93+
? 'i-carbon-checkmark'
94+
: 'i-carbon-close'
95+
"
96+
>
9997
ESM
10098
</TagStatic>
10199
</TooltipApp>
@@ -104,13 +102,13 @@ const typesHref = computed(() => {
104102
<!-- CJS badge -->
105103
<li v-if="isLoading || hasCjs" class="contents">
106104
<TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')">
107-
<TagStatic tabindex="0" :variant="isLoading ? 'disabled' : 'default'">
108-
<span
109-
v-if="isLoading"
110-
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
111-
aria-hidden="true"
112-
/>
113-
<span v-else class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
105+
<TagStatic
106+
tabindex="0"
107+
:variant="isLoading ? 'disabled' : 'default'"
108+
:classicon="
109+
isLoading ? 'i-carbon-circle-dash motion-safe:animate-spin' : 'i-carbon-checkmark'
110+
"
111+
>
114112
CJS
115113
</TagStatic>
116114
</TooltipApp>

‎app/components/Tag/Static.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<script setup lang="ts">
22
const props = withDefaults(
3-
defineProps<{ as?: string | Component; variant?: 'disabled' | 'default' }>(),
3+
defineProps<{
4+
as?: string | Component
5+
variant?: 'disabled' | 'default'
6+
7+
classicon?: string
8+
}>(),
49
{ as: 'span', variant: 'default' },
510
)
611
</script>
@@ -11,6 +16,7 @@ const props = withDefaults(
1116
class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
1217
:class="{ 'opacity-40': variant === 'disabled' }"
1318
>
19+
<span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
1420
<slot />
1521
</component>
1622
</template>

‎app/pages/index.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,12 @@ defineOgImageComponent('Default', {
9696
@input="handleInput"
9797
/>
9898

99-
<ButtonBase type="submit" variant="primary" class="absolute inset-ie-2">
100-
<span class="i-carbon:search align-middle w-4 h-4" aria-hidden="true"></span>
101-
99+
<ButtonBase
100+
type="submit"
101+
variant="primary"
102+
class="absolute inset-ie-2"
103+
classicon="i-carbon:search"
104+
>
102105
<span class="sr-only sm:not-sr-only">
103106
{{ $t('search.button') }}
104107
</span>

‎app/pages/package/[...package].vue‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -576,9 +576,8 @@ onKeyStroke(
576576
variant="tag"
577577
href="#provenance"
578578
:aria-label="$t('package.provenance_section.view_more_details')"
579-
>
580-
<span class="i-lucide-shield-check w-3.5 h-3.5 shrink-0" aria-hidden="true" />
581-
</LinkBase>
579+
classicon="i-lucide-shield-check"
580+
/>
582581
</TooltipApp>
583582
</template>
584583
<span
@@ -650,24 +649,29 @@ onKeyStroke(
650649
:aria-label="$t('package.navigation')"
651650
class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
652651
>
653-
<LinkBase variant="button-secondary" v-if="docsLink" :to="docsLink" keyshortcut="d">
654-
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
652+
<LinkBase
653+
variant="button-secondary"
654+
v-if="docsLink"
655+
:to="docsLink"
656+
keyshortcut="d"
657+
classicon="i-carbon:document"
658+
>
655659
{{ $t('package.links.docs') }}
656660
</LinkBase>
657661
<LinkBase
658662
variant="button-secondary"
659663
:to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
660664
keyshortcut="."
665+
classicon="i-carbon:code"
661666
>
662-
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
663667
{{ $t('package.links.code') }}
664668
</LinkBase>
665669
<LinkBase
666670
variant="button-secondary"
667671
:to="{ path: '/compare', query: { packages: pkg.name } }"
668672
keyshortcut="c"
673+
classicon="i-carbon:compare"
669674
>
670-
<span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
671675
{{ $t('package.links.compare') }}
672676
</LinkBase>
673677
</nav>
@@ -695,8 +699,8 @@ onKeyStroke(
695699
:href="repositoryUrl"
696700
target="_blank"
697701
rel="noopener noreferrer"
702+
:classicon="repoProviderIcon"
698703
>
699-
<span class="w-4 h-4" :class="repoProviderIcon" aria-hidden="true" />
700704
<span v-if="repoRef">
701705
{{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
702706
</span>
@@ -709,8 +713,8 @@ onKeyStroke(
709713
:href="starsLink"
710714
target="_blank"
711715
rel="noopener noreferrer"
716+
classicon="i-carbon:star"
712717
>
713-
<span class="w-4 h-4 i-carbon:star" aria-hidden="true" />
714718
{{ formatCompactNumber(stars, { decimals: 1 }) }}
715719
</LinkBase>
716720
</li>
@@ -720,8 +724,8 @@ onKeyStroke(
720724
:href="forksLink"
721725
target="_blank"
722726
rel="noopener noreferrer"
727+
classicon="i-carbon:fork"
723728
>
724-
<span class="i-carbon:fork w-4 h-4" aria-hidden="true" />
725729
{{ formatCompactNumber(forks, { decimals: 1 }) }}
726730
</LinkBase>
727731
</li>
@@ -731,8 +735,8 @@ onKeyStroke(
731735
:href="homepageUrl"
732736
target="_blank"
733737
rel="noopener noreferrer"
738+
classicon="i-carbon:link"
734739
>
735-
<span class="i-carbon:link w-4 h-4" aria-hidden="true" />
736740
{{ $t('package.links.homepage') }}
737741
</LinkBase>
738742
</li>
@@ -742,8 +746,8 @@ onKeyStroke(
742746
:href="displayVersion.bugs.url"
743747
target="_blank"
744748
rel="noopener noreferrer"
749+
classicon="i-carbon:warning"
745750
>
746-
<span class="i-carbon:warning w-4 h-4" aria-hidden="true" />
747751
{{ $t('package.links.issues') }}
748752
</LinkBase>
749753
</li>
@@ -754,8 +758,8 @@ onKeyStroke(
754758
target="_blank"
755759
rel="noopener noreferrer"
756760
:title="$t('common.view_on_npm')"
761+
classicon="i-carbon:logo-npm"
757762
>
758-
<span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
759763
npm
760764
</LinkBase>
761765
</li>
@@ -766,8 +770,8 @@ onKeyStroke(
766770
target="_blank"
767771
rel="noopener noreferrer"
768772
:title="$t('badges.jsr.title')"
773+
classicon="i-simple-icons:jsr"
769774
>
770-
<span class="i-simple-icons:jsr w-4 h-4" aria-hidden="true" />
771775
{{ $t('package.links.jsr') }}
772776
</LinkBase>
773777
</li>
@@ -777,33 +781,32 @@ onKeyStroke(
777781
:href="fundingUrl"
778782
target="_blank"
779783
rel="noopener noreferrer"
784+
classicon="i-carbon:favorite"
780785
>
781-
<span class="i-carbon:favorite w-4 h-4" aria-hidden="true" />
782786
{{ $t('package.links.fund') }}
783787
</LinkBase>
784788
</li>
785789
<!-- Mobile-only: Docs + Code + Compare links -->
786790
<li v-if="docsLink && displayVersion" class="sm:hidden">
787-
<LinkBase variant="button-secondary" :to="docsLink">
788-
<span class="i-carbon:document w-4 h-4" aria-hidden="true" />
791+
<LinkBase variant="button-secondary" :to="docsLink" classicon="i-carbon:document">
789792
{{ $t('package.links.docs') }}
790793
</LinkBase>
791794
</li>
792795
<li v-if="resolvedVersion" class="sm:hidden">
793796
<LinkBase
794797
variant="button-secondary"
795798
:to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
799+
classicon="i-carbon:code"
796800
>
797-
<span class="i-carbon:code w-4 h-4" aria-hidden="true" />
798801
{{ $t('package.links.code') }}
799802
</LinkBase>
800803
</li>
801804
<li class="sm:hidden">
802805
<LinkBase
803806
variant="button-secondary"
804807
:to="{ path: '/compare', query: { packages: pkg.name } }"
808+
classicon="i-carbon:compare"
805809
>
806-
<span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
807810
{{ $t('package.links.compare') }}
808811
</LinkBase>
809812
</li>
@@ -883,8 +886,8 @@ onKeyStroke(
883886
target="_blank"
884887
rel="noopener noreferrer"
885888
:title="$t('package.stats.view_dependency_graph')"
889+
classicon="i-carbon:network-3"
886890
>
887-
<span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
888891
<span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
889892
</LinkBase>
890893

@@ -895,8 +898,8 @@ onKeyStroke(
895898
target="_blank"
896899
rel="noopener noreferrer"
897900
:title="$t('package.stats.inspect_dependency_tree')"
901+
classicon="i-carbon:tree-view"
898902
>
899-
<span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />
900903
<span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
901904
</LinkBase>
902905
</div>

0 commit comments

Comments
 (0)