diff --git a/packages/common/components/src/ui/icon-finder/data.ts b/packages/common/components/src/ui/icon-finder/data.ts new file mode 100644 index 000000000..b5b2d8c2b --- /dev/null +++ b/packages/common/components/src/ui/icon-finder/data.ts @@ -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", +]; diff --git a/packages/common/components/src/ui/icon-finder/icon-finder.stories.tsx b/packages/common/components/src/ui/icon-finder/icon-finder.stories.tsx new file mode 100644 index 000000000..59a37c8c7 --- /dev/null +++ b/packages/common/components/src/ui/icon-finder/icon-finder.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { IconFinder } from "./index"; + +const meta: Meta = { + title: "UI/IconFinder", + component: IconFinder, + tags: ["autodocs"], + argTypes: {}, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => , +}; diff --git a/packages/common/components/src/ui/icon-finder/index.tsx b/packages/common/components/src/ui/icon-finder/index.tsx new file mode 100644 index 000000000..71f6f9c18 --- /dev/null +++ b/packages/common/components/src/ui/icon-finder/index.tsx @@ -0,0 +1,33 @@ +import { Button } from "../button"; +import { Dialog, DialogContent, DialogTrigger } from "../dialog"; +import iconNames from "./data"; + +const IconFinder = () => { + return ( + + + + + +
+
+ {iconNames.map((icon) => ( + + ))} +
+
+ + + ); +}; + +const IconItem = ({ icon }: { icon: string }) => { + return ( +
+ + {icon} +
+ ); +}; + +export { IconFinder };