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

BIN
public/assets/ark-library/media/png/academy-materials.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

BIN
public/assets/ark-library/media/png/academy-video.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

10
src/components/CategoryIcon.tsx
View File

@@ -15,7 +15,7 @@ import {
Play, Play,
type LucideIcon, type LucideIcon,
} from "lucide-react"; } from "lucide-react";
import { categorySvgUrlForSlug } from "../lib/categorySvgSlug"; import { categoryAssetUrlForSlug } from "../lib/categorySvgSlug";
const map: Record<string, LucideIcon> = { const map: Record<string, LucideIcon> = {
folder: Folder, folder: Folder,
@@ -40,15 +40,15 @@ export function CategoryIcon({
className, className,
}: { }: {
iconKey: string; 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; categorySlug?: string;
className?: string; className?: string;
}) { }) {
const svgUrl = categorySlug ? categorySvgUrlForSlug(categorySlug) : null; const assetUrl = categorySlug ? categoryAssetUrlForSlug(categorySlug) : null;
if (svgUrl) { if (assetUrl) {
return ( return (
<img <img
src={svgUrl} src={assetUrl}
alt="" alt=""
className={[className, "object-contain pointer-events-none select-none"] className={[className, "object-contain pointer-events-none select-none"]
.filter(Boolean) .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). */ /** Asset path under `/assets/ark-library/media/` for each category slug. */
const slugToSvg: Record<string, string> = { const slugToAsset: Record<string, string> = {
"project-ppt": "project-details.svg", "project-ppt": "svg/project-details.svg",
"daily-class": "everyday-class.svg", "daily-class": "svg/everyday-class.svg",
"official-announcement": "official-announcement.svg", "official-announcement": "svg/official-announcement.svg",
"academy-materials": "educational-clips.svg", "academy-materials": "png/academy-materials.png",
"global-evangelism": "global-news.svg", "global-evangelism": "svg/global-news.svg",
"daily-poster": "poster.svg", "daily-poster": "svg/poster.svg",
"community-tweets": "community.svg", "community-tweets": "svg/community.svg",
"video-hub": "videos.svg", "video-hub": "svg/videos.svg",
"subsidy-policy": "gift.svg", "subsidy-policy": "svg/gift.svg",
"how-to": "guidelines.svg", "how-to": "svg/guidelines.svg",
"official-assets": "directory.svg", "official-assets": "svg/directory.svg",
"media-coverage": "news-record.svg", "media-coverage": "svg/news-record.svg",
"academy-video": "educational-clips.svg", "academy-video": "png/academy-video.png",
general: "general.svg", "acedemy-video": "png/academy-video.png",
general: "svg/general.svg",
}; };
export function categorySvgUrlForSlug(slug: string): string | null { export function categoryAssetUrlForSlug(slug: string): string | null {
const file = slugToSvg[slug]; const file = slugToAsset[slug];
if (!file) return null; if (!file) return null;
return `/assets/ark-library/media/svg/${file}`; return `/assets/ark-library/media/${file}`;
} }