terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(category-icon): 分类图标支持 PNG 资源,学院类目改用 PNG

Browse Source 
categorySvgUrlForSlug → categoryAssetUrlForSlug,映射值改为带子目录
的相对路径(svg/ 或 png/),新增 academy-materials / academy-video
的 PNG 图标并兼容拼写别名 acedemy-video。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-30 17:34:18 +08:00
parent 07f040a549
commit 0733ea8b18
4 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/CategoryIcon.tsx
View File

@@ -15,7 +15,7 @@ import {
Play,
type LucideIcon,
} from "lucide-react";
import { categorySvgUrlForSlug } from "../lib/categorySvgSlug";
import { categoryAssetUrlForSlug } from "../lib/categorySvgSlug";
const map: Record<string, LucideIcon> = {
folder: Folder,
@@ -40,15 +40,15 @@ export function CategoryIcon({
className,
}: {
iconKey: string;
/** When set, prefer branded SVG from `public/assets/ark-library/media/svg/`. */
/** When set, prefer branded asset from `public/assets/ark-library/media/`. */
categorySlug?: string;
className?: string;
}) {
const svgUrl = categorySlug ? categorySvgUrlForSlug(categorySlug) : null;
if (svgUrl) {
const assetUrl = categorySlug ? categoryAssetUrlForSlug(categorySlug) : null;
if (assetUrl) {
return (
<img
src={svgUrl}
src={assetUrl}
alt=""
className={[className, "object-contain pointer-events-none select-none"]
.filter(Boolean)

39
src/lib/categorySvgSlug.ts
View File

@@ -1,23 +1,24 @@
/** Basename under `/assets/ark-library/media/svg/` for each category slug (matches ark-library-media/svg). */
const slugToSvg: Record<string, string> = {
"project-ppt": "project-details.svg",
"daily-class": "everyday-class.svg",
"official-announcement": "official-announcement.svg",
"academy-materials": "educational-clips.svg",
"global-evangelism": "global-news.svg",
"daily-poster": "poster.svg",
"community-tweets": "community.svg",
"video-hub": "videos.svg",
"subsidy-policy": "gift.svg",
"how-to": "guidelines.svg",
"official-assets": "directory.svg",
"media-coverage": "news-record.svg",
"academy-video": "educational-clips.svg",
general: "general.svg",
/** Asset path under `/assets/ark-library/media/` for each category slug. */
const slugToAsset: Record<string, string> = {
"project-ppt": "svg/project-details.svg",
"daily-class": "svg/everyday-class.svg",
"official-announcement": "svg/official-announcement.svg",
"academy-materials": "png/academy-materials.png",
"global-evangelism": "svg/global-news.svg",
"daily-poster": "svg/poster.svg",
"community-tweets": "svg/community.svg",
"video-hub": "svg/videos.svg",
"subsidy-policy": "svg/gift.svg",
"how-to": "svg/guidelines.svg",
"official-assets": "svg/directory.svg",
"media-coverage": "svg/news-record.svg",
"academy-video": "png/academy-video.png",
"acedemy-video": "png/academy-video.png",
general: "svg/general.svg",
};
export function categorySvgUrlForSlug(slug: string): string | null {
const file = slugToSvg[slug];
export function categoryAssetUrlForSlug(slug: string): string | null {
const file = slugToAsset[slug];
if (!file) return null;
return `/assets/ark-library/media/svg/${file}`;
return `/assets/ark-library/media/${file}`;
}