feat: icon finder 컴포넌트 생성
This commit is contained in:
@@ -0,0 +1,592 @@
|
||||
export default [
|
||||
"account-box",
|
||||
"account-circle",
|
||||
"add-image",
|
||||
"add-Note",
|
||||
"alarm-add",
|
||||
"alarm-clock",
|
||||
"alarm-off",
|
||||
"alarm-on",
|
||||
"alarm",
|
||||
"alternate",
|
||||
"analytics",
|
||||
"android",
|
||||
"announcement",
|
||||
"app-indicator",
|
||||
"app-list",
|
||||
"app-square",
|
||||
"apple",
|
||||
"apps-square",
|
||||
"apps",
|
||||
"archive-fill",
|
||||
"archive",
|
||||
"arrow-90left-down",
|
||||
"arrow-90left-up",
|
||||
"arrow-90left",
|
||||
"arrow-90right-down",
|
||||
"arrow-90right-up",
|
||||
"arrow-90right",
|
||||
"arrow-back-square-fill",
|
||||
"arrow-back",
|
||||
"arrow-down-square-fill",
|
||||
"arrow-down-square",
|
||||
"arrow-down",
|
||||
"arrow-forward-square-fill",
|
||||
"arrow-forward",
|
||||
"arrow-left-right",
|
||||
"arrow-left-square-fill",
|
||||
"arrow-left-square",
|
||||
"arrow-left",
|
||||
"arrow-lr-up-down",
|
||||
"arrow-reflash",
|
||||
"arrow-reset",
|
||||
"arrow-right-square-fill",
|
||||
"arrow-right-square",
|
||||
"arrow-right",
|
||||
"arrow-up-down",
|
||||
"arrow-up-square-fill",
|
||||
"arrow-up-square",
|
||||
"arrow-up",
|
||||
"arrows-angle-contract",
|
||||
"arrows-angle-expand",
|
||||
"arrows-fullscreen",
|
||||
"aspect-ratio-fill",
|
||||
"aspect-ratio",
|
||||
"assignment-ind",
|
||||
"assignment-turned-in",
|
||||
"assignment",
|
||||
"asterisk",
|
||||
"atm",
|
||||
"badge-4k-fill",
|
||||
"badge-4k",
|
||||
"badge-8k-fill",
|
||||
"badge-8k",
|
||||
"badge-ad-fill",
|
||||
"badge-ad",
|
||||
"badge-cc-fill",
|
||||
"badge-cc",
|
||||
"badge-hd-fill",
|
||||
"badge-hd",
|
||||
"badge-tm-fill",
|
||||
"badge-tm",
|
||||
"bag-check-fill",
|
||||
"bag-check",
|
||||
"bag-fill",
|
||||
"bag",
|
||||
"bags",
|
||||
"bar-chart-fill",
|
||||
"bar-chart",
|
||||
"battery-charging",
|
||||
"battery-emty",
|
||||
"battery-full",
|
||||
"battery-harf",
|
||||
"bell-alert-box-fill",
|
||||
"bell-alert-box",
|
||||
"bell-alert-fill",
|
||||
"bell-alert",
|
||||
"bell-notification-fill",
|
||||
"bell-notification-on-fill",
|
||||
"bell-notification-on",
|
||||
"bell-notification",
|
||||
"bike",
|
||||
"bluetooth",
|
||||
"boat",
|
||||
"book",
|
||||
"bookmark-check-fill",
|
||||
"bookmark-check",
|
||||
"bookmark-fill",
|
||||
"bookmark-new-fill",
|
||||
"bookmark-new",
|
||||
"bookmark-star-fill",
|
||||
"bookmark-star",
|
||||
"bookmark",
|
||||
"boostzone",
|
||||
"box-arrow-backup",
|
||||
"box-arrow-download",
|
||||
"box-arrow-link-blank",
|
||||
"box-arrow-upload",
|
||||
"box-seam",
|
||||
"box",
|
||||
"braces",
|
||||
"briefcase-fill",
|
||||
"briefcase",
|
||||
"brightness-fill",
|
||||
"brightness",
|
||||
"broadcast-pin",
|
||||
"broadcast",
|
||||
"bug-fill",
|
||||
"bug",
|
||||
"building",
|
||||
"bus",
|
||||
"calculator-fill",
|
||||
"calculator",
|
||||
"calendar-check-fill",
|
||||
"calendar-check",
|
||||
"calendar-day-fill",
|
||||
"calendar-day",
|
||||
"calendar-event-fill",
|
||||
"calendar-event",
|
||||
"calendar-fill",
|
||||
"calendar-week-fill",
|
||||
"calendar-week",
|
||||
"calendar",
|
||||
"call-end",
|
||||
"call",
|
||||
"camera-fill",
|
||||
"camera-video-fill",
|
||||
"camera-video",
|
||||
"camera",
|
||||
"car",
|
||||
"card-fill",
|
||||
"card",
|
||||
"caret-down-fill",
|
||||
"caret-down-square-fill",
|
||||
"caret-down-square",
|
||||
"caret-left-fill",
|
||||
"caret-left-square-fill",
|
||||
"caret-left-square",
|
||||
"caret-right-fill",
|
||||
"caret-right-square-fill",
|
||||
"caret-right-square",
|
||||
"caret-up-fill",
|
||||
"caret-up-square-fill",
|
||||
"caret-up-square",
|
||||
"cart-fill",
|
||||
"cart",
|
||||
"cash-stack",
|
||||
"cash",
|
||||
"cast",
|
||||
"cctv",
|
||||
"chat-box-left-dots-fill",
|
||||
"chat-box-left-dots",
|
||||
"chat-box-left-fill",
|
||||
"chat-box-left-text-fill",
|
||||
"chat-box-left-text",
|
||||
"chat-box-left",
|
||||
"chat-box-right-dots-fill",
|
||||
"chat-box-right-dots",
|
||||
"chat-box-right-fill",
|
||||
"chat-box-right-text-fill",
|
||||
"chat-box-right-text",
|
||||
"chat-box-right",
|
||||
"chat-circle-left-dot-fill",
|
||||
"chat-circle-left-dot",
|
||||
"chat-circle-left-fill",
|
||||
"chat-circle-left-text-fill",
|
||||
"chat-circle-left-text",
|
||||
"chat-circle-left",
|
||||
"chat-circle-right-dot-fill",
|
||||
"chat-circle-right-dot",
|
||||
"chat-circle-right-fill",
|
||||
"chat-circle-right-text-fill",
|
||||
"chat-circle-right-text",
|
||||
"chat-circle-right",
|
||||
"check-box",
|
||||
"check-circle-fill",
|
||||
"check-circle-line",
|
||||
"check-circle",
|
||||
"check-square-fill",
|
||||
"check-square-line",
|
||||
"check-square",
|
||||
"check",
|
||||
"chevron-bar-contract",
|
||||
"chevron-bar-down",
|
||||
"chevron-bar-expand",
|
||||
"chevron-bar-left",
|
||||
"chevron-bar-right",
|
||||
"chevron-bar-up",
|
||||
"chevron-contract",
|
||||
"chevron-double-down",
|
||||
"chevron-double-left",
|
||||
"chevron-double-right",
|
||||
"chevron-double-up",
|
||||
"chevron-down",
|
||||
"chevron-expand",
|
||||
"chevron-left",
|
||||
"chevron-right",
|
||||
"chevron-up",
|
||||
"clipboard-check",
|
||||
"clipboard-data",
|
||||
"clipboard-text",
|
||||
"clipboard",
|
||||
"clock-fill",
|
||||
"clock-history",
|
||||
"clock",
|
||||
"cloud-arrow-down-fill",
|
||||
"cloud-arrow-down",
|
||||
"cloud-arrow-up-fill",
|
||||
"cloud-arrow-up",
|
||||
"cloud-check-fill",
|
||||
"cloud-check",
|
||||
"cloud-fill",
|
||||
"cloud",
|
||||
"code-square",
|
||||
"code",
|
||||
"collection-fill",
|
||||
"collection",
|
||||
"compass-fill",
|
||||
"compass",
|
||||
"cone",
|
||||
"controller-fill",
|
||||
"controller",
|
||||
"copyright-sign",
|
||||
"copyright-symbol",
|
||||
"COVID-19-fill",
|
||||
"COVID-19",
|
||||
"cpu-fill",
|
||||
"cpu",
|
||||
"crop",
|
||||
"cup-fill",
|
||||
"cup-straw",
|
||||
"cup",
|
||||
"cursor-fill",
|
||||
"cursor-text",
|
||||
"cursor",
|
||||
"dash-circle-fill",
|
||||
"dash-circle",
|
||||
"dash-square-fill",
|
||||
"dash-square",
|
||||
"dash",
|
||||
"dashboard",
|
||||
"diagram",
|
||||
"diamond-fill",
|
||||
"diamond",
|
||||
"diamond2",
|
||||
"display-fill",
|
||||
"display",
|
||||
"dns",
|
||||
"door-closed-fill",
|
||||
"door-closed",
|
||||
"download_app",
|
||||
"download",
|
||||
"email-fill-notification",
|
||||
"email-fill-open",
|
||||
"email-fill",
|
||||
"email-notification",
|
||||
"email-open",
|
||||
"email",
|
||||
"emergenc_call",
|
||||
"emergenc",
|
||||
"exclamation-chat-fill",
|
||||
"exclamation-chat",
|
||||
"exclamation-circle-fill",
|
||||
"exclamation-circle",
|
||||
"exclamation-diamond-fill",
|
||||
"exclamation-diamond",
|
||||
"exclamation-square-circle",
|
||||
"exclamation-square-fill",
|
||||
"exclamation-square",
|
||||
"exclamation-triangle-fill",
|
||||
"exclamation-triangle",
|
||||
"exclamation",
|
||||
"exclude",
|
||||
"face-id",
|
||||
"facebook-circle",
|
||||
"facebook-square",
|
||||
"favorite-hart",
|
||||
"favorite-star",
|
||||
"file-copy",
|
||||
"file-excel",
|
||||
"file-image",
|
||||
"file-keynote",
|
||||
"file-numbers",
|
||||
"file-powerpoint",
|
||||
"file-text",
|
||||
"file-word",
|
||||
"file",
|
||||
"filter-circle-fill",
|
||||
"filter-circle",
|
||||
"filter-left",
|
||||
"filter-right",
|
||||
"filter-square-fill",
|
||||
"filter-square",
|
||||
"filter",
|
||||
"finder-folder",
|
||||
"finder",
|
||||
"fingerprint",
|
||||
"flag-fill",
|
||||
"flag",
|
||||
"flashlight",
|
||||
"folder-check",
|
||||
"folder-delet",
|
||||
"folder-fill",
|
||||
"folder-open-fill",
|
||||
"folder-open",
|
||||
"folder-plus",
|
||||
"folder-share",
|
||||
"folder-x",
|
||||
"folder",
|
||||
"font",
|
||||
"fullscreen-exit",
|
||||
"fullscreen",
|
||||
"gear-fill",
|
||||
"gear-square-fill",
|
||||
"gear-system-update",
|
||||
"gear",
|
||||
"gem",
|
||||
"geo-alt",
|
||||
"geo-location",
|
||||
"geo-my-location",
|
||||
"gift-fill",
|
||||
"gift",
|
||||
"graph-down",
|
||||
"graph-up",
|
||||
"grid-2-fill",
|
||||
"grid-3-fill",
|
||||
"grid",
|
||||
"grip-horizontal",
|
||||
"grip-vertical",
|
||||
"group",
|
||||
"group2",
|
||||
"hand-index",
|
||||
"harf",
|
||||
"hart-fill",
|
||||
"hart-half",
|
||||
"hash",
|
||||
"hdd-network",
|
||||
"hdd",
|
||||
"hexagon-fill",
|
||||
"hexagon-harf",
|
||||
"hexagon",
|
||||
"history",
|
||||
"home-fill",
|
||||
"home",
|
||||
"hotel_bed",
|
||||
"hotel",
|
||||
"image-fill",
|
||||
"image",
|
||||
"images",
|
||||
"info-box",
|
||||
"info-circle",
|
||||
"info-fill",
|
||||
"info",
|
||||
"instagram-circle",
|
||||
"instagram-fill",
|
||||
"instagram",
|
||||
"intersect",
|
||||
"justify-left",
|
||||
"justify-right",
|
||||
"justify",
|
||||
"kakao-alim-talk",
|
||||
"kakao-circle",
|
||||
"kakao-firend-talk",
|
||||
"kakao-story-circle",
|
||||
"kakao-story",
|
||||
"kakao-talk",
|
||||
"key",
|
||||
"keyboard",
|
||||
"label",
|
||||
"language",
|
||||
"laptop-fill",
|
||||
"laptop",
|
||||
"layer-back",
|
||||
"layer-front",
|
||||
"layer",
|
||||
"lightning-fill",
|
||||
"lightning",
|
||||
"list-check",
|
||||
"list",
|
||||
"local-airport-land",
|
||||
"local-airport",
|
||||
"local-atm",
|
||||
"local-bar",
|
||||
"local-cafe",
|
||||
"local-dining",
|
||||
"local-ev-station",
|
||||
"local-fastfood",
|
||||
"local-gas-station",
|
||||
"local-hospital",
|
||||
"local-laundry",
|
||||
"local-library",
|
||||
"local-museum",
|
||||
"local-restaurant",
|
||||
"local-store",
|
||||
"lock-open",
|
||||
"lock",
|
||||
"map-fill",
|
||||
"map",
|
||||
"menu-close-fill",
|
||||
"menu-close",
|
||||
"menu-open-fill",
|
||||
"menu-open",
|
||||
"mic-fill",
|
||||
"mic-mute-fill",
|
||||
"mic-mute",
|
||||
"mic",
|
||||
"minus",
|
||||
"mobile-android",
|
||||
"mobile-flip",
|
||||
"mobile-fold",
|
||||
"mobile-ios",
|
||||
"mobile-pad",
|
||||
"mobile-store",
|
||||
"mobile",
|
||||
"moon-crescent",
|
||||
"moon-half",
|
||||
"moon",
|
||||
"more-horiz",
|
||||
"more-vert",
|
||||
"movie-fill",
|
||||
"movie",
|
||||
"music-backward-fill",
|
||||
"music-backward",
|
||||
"music-forward-fill",
|
||||
"music-forward",
|
||||
"music-list",
|
||||
"music-pause-fill",
|
||||
"music-pause",
|
||||
"music-play-fill",
|
||||
"music-play",
|
||||
"music-stop-fill",
|
||||
"music-stop",
|
||||
"music",
|
||||
"naver-blog",
|
||||
"naver-circle",
|
||||
"naver",
|
||||
"news",
|
||||
"option",
|
||||
"paperclip",
|
||||
"payment",
|
||||
"pen-fill",
|
||||
"pen",
|
||||
"pencil-fill",
|
||||
"pencil-square",
|
||||
"pencil",
|
||||
"person-fill",
|
||||
"person",
|
||||
"personal-information",
|
||||
"pet",
|
||||
"power",
|
||||
"print",
|
||||
"problem",
|
||||
"profile-smile",
|
||||
"profile",
|
||||
"push-assemble",
|
||||
"push-fill",
|
||||
"push-notification",
|
||||
"push",
|
||||
"question-answer",
|
||||
"question-circle-fill",
|
||||
"question-circle",
|
||||
"question-diamond-fill",
|
||||
"question-diamond",
|
||||
"question-square-fill",
|
||||
"question-square",
|
||||
"question",
|
||||
"radio",
|
||||
"receipt",
|
||||
"refresh-fill",
|
||||
"refresh",
|
||||
"reset-fill",
|
||||
"reset",
|
||||
"rotation-lock",
|
||||
"rotation",
|
||||
"rwis",
|
||||
"search",
|
||||
"server",
|
||||
"share",
|
||||
"shield",
|
||||
"shift-fill",
|
||||
"shift",
|
||||
"shuffle",
|
||||
"silent",
|
||||
"sim",
|
||||
"slash",
|
||||
"sliders",
|
||||
"smart-watch",
|
||||
"sort-alpha-down-alt",
|
||||
"sort-alpha-down",
|
||||
"sort-alpha-up-alt",
|
||||
"sort-alpha-up",
|
||||
"sort-down-alt",
|
||||
"sort-down",
|
||||
"sort-numeric-down-alt",
|
||||
"sort-numeric-down",
|
||||
"sort-numeric-up-alt",
|
||||
"sort-numeric-up",
|
||||
"sort-up-alt",
|
||||
"sort-up",
|
||||
"sound",
|
||||
"soundwave",
|
||||
"square-fill",
|
||||
"square",
|
||||
"star-circle",
|
||||
"star-fill",
|
||||
"star",
|
||||
"statistics-circle",
|
||||
"statistics",
|
||||
"sticky-fill",
|
||||
"sticky",
|
||||
"stoplights-fill",
|
||||
"stoplights",
|
||||
"sunny",
|
||||
"tab",
|
||||
"table",
|
||||
"terminal-fill",
|
||||
"terminal",
|
||||
"ternnel",
|
||||
"textarea-t",
|
||||
"textarea",
|
||||
"thermometer-full",
|
||||
"thermometer-half",
|
||||
"thermometer",
|
||||
"time-end",
|
||||
"time-full",
|
||||
"time-start",
|
||||
"toggle-off",
|
||||
"toggle-on",
|
||||
"toggle",
|
||||
"train",
|
||||
"trash-fill",
|
||||
"trash",
|
||||
"truck-fill",
|
||||
"truck",
|
||||
"ui-checks-grid",
|
||||
"ui-radios-grid",
|
||||
"upload",
|
||||
"vibration",
|
||||
"vms",
|
||||
"volume-down-fill",
|
||||
"volume-down",
|
||||
"volume-mute-fill",
|
||||
"volume-mute",
|
||||
"volume-off-fill",
|
||||
"volume-off",
|
||||
"volume-up-fill",
|
||||
"volume-up",
|
||||
"weather-cloud-fill",
|
||||
"weather-cloud",
|
||||
"weather-cloudy-gusts",
|
||||
"weather-cloudy-windy",
|
||||
"weather-cloudy",
|
||||
"weather-fahrenheit",
|
||||
"weather-fog",
|
||||
"weather-hail",
|
||||
"weather-humidity",
|
||||
"weather-hurricane",
|
||||
"weather-lightning",
|
||||
"weather-rain",
|
||||
"weather-rainny",
|
||||
"weather-snow",
|
||||
"weather-snowflake",
|
||||
"weather-sunny-overcast",
|
||||
"weather-sunny",
|
||||
"weather-thunderstorm",
|
||||
"weather-umbrella",
|
||||
"weather-windy",
|
||||
"whater",
|
||||
"whather-celsius",
|
||||
"wifi-1",
|
||||
"wifi-2",
|
||||
"wifi-off",
|
||||
"wifi",
|
||||
"window",
|
||||
"x-circle-fill",
|
||||
"x-circle",
|
||||
"x-square-fill",
|
||||
"x-square",
|
||||
"x",
|
||||
"zoom-in",
|
||||
"zoom-out",
|
||||
"server-line",
|
||||
];
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { IconFinder } from "./index";
|
||||
|
||||
const meta: Meta<typeof IconFinder> = {
|
||||
title: "UI/IconFinder",
|
||||
component: IconFinder,
|
||||
tags: ["autodocs"],
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof IconFinder>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => <IconFinder />,
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Button } from "../button";
|
||||
import { Dialog, DialogContent, DialogTrigger } from "../dialog";
|
||||
import iconNames from "./data";
|
||||
|
||||
const IconFinder = () => {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button>아이콘 찾기</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-h-[65rem] max-w-[65rem] overflow-y-auto p-12">
|
||||
<div className="py-4">
|
||||
<div className="grid grid-cols-5 gap-10 text-[2.4rem]">
|
||||
{iconNames.map((icon) => (
|
||||
<IconItem key={icon} icon={icon} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
const IconItem = ({ icon }: { icon: string }) => {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<i className={`diveicon di-${icon}`} />
|
||||
<span className="text-center text-[1.2rem]">{icon}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { IconFinder };
|
||||
Reference in New Issue
Block a user