website

#astro#js#html#css

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.


f4e7793pyrossh 2026-07-04T14:53:11+05:30
refactor: migrate RecursiveList icons to unplugin-icons + DynamicIcon
Files changed (1) hide show
  1. src/components/RecursiveList.astro +7 -14
src/components/RecursiveList.astro CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
- import { Icon } from "astro-icon/components";
2
+ import MdiFolder from "~icons/mdi/folder";
3
- import allIcons from "@iconify-json/vscode-icons/icons.json" assert { type: "json" };
3
+ import DynamicIcon from "./DynamicIcon.astro";
4
4
  import prettyBytes from "pretty-bytes";
5
5
  import { resolveFileIcon } from "@/utils/files";
6
6
 
@@ -30,10 +30,10 @@ const { items, repoId, depth = 0 } = Astro.props;
30
30
  <li class="folder" style={`padding-left: ${depth * 1}rem;`}>
31
31
  <details>
32
32
  <summary>
33
- <Icon
33
+ <MdiFolder
34
- name="mdi:folder"
34
+ style="color: hsl(45deg 75.37% 60%);"
35
- size="24px"
35
+ width="24"
36
- color="hsl(45deg 75.37% 60%)"
36
+ height="24"
37
37
  />
38
38
  <span>{item.name}</span>
39
39
  </summary>
@@ -49,14 +49,11 @@ const { items, repoId, depth = 0 } = Astro.props;
49
49
  );
50
50
  } else {
51
51
  const iconName = resolveFileIcon(item.name, item.ext);
52
- const fileType = allIcons.icons[`file-type-${iconName}`]
53
- ? `file-type-${iconName}`
54
- : "default-file";
55
52
  return (
56
53
  <li class="file" style={`padding-left: ${depth * 1}rem;`}>
57
54
  <div class="file-content">
58
55
  <div class="file-name">
59
- <Icon name={`vscode-icons:${fileType}`} size="18px" />
56
+ <DynamicIcon name={`file-type-${iconName}`} size="18px" />
60
57
  <a href={`/repos/${repoId}/files/${item.path}`} rel="nofollow">
61
58
  {item.name}
62
59
  </a>
@@ -74,10 +71,6 @@ const { items, repoId, depth = 0 } = Astro.props;
74
71
  }
75
72
 
76
73
  <style>
77
- svg[data-icon] {
78
- margin-right: 0.3rem;
79
- }
80
-
81
74
  .folder {
82
75
  margin: 0;
83
76
  details {