<script setup lang="ts"> import Age18Icon from '@icons/Mono/Age18Icon.vue'; import AlarmIcon from '@icons/Mono/AlarmIcon.vue'; import AirplaneIcon from '@icons/Mono/AirplaneIcon.vue'; import ArrowLeftIcon from '@icons/Mono/ArrowLeftIcon.vue'; import ArrowForwardIcon from '@icons/Mono/ArrowForwardIcon.vue'; import ArchiveIcon from '@icons/Mono/ArchiveIcon.vue'; import AnchorLinkIcon from '@icons/Mono/AnchorLinkIcon.vue'; import AnchorIcon from '@icons/Mono/AnchorIcon.vue'; import AlignRightIcon from '@icons/Mono/AlignRightIcon.vue'; import AlignLeftIcon from '@icons/Mono/AlignLeftIcon.vue'; import AlignCenterIcon from '@icons/Mono/AlignCenterIcon.vue'; import ArrowRightIcon from '@icons/Mono/ArrowRightIcon.vue'; import AtIcon from '@icons/Mono/AtIcon.vue'; import AwardIcon from '@icons/Mono/AwardIcon.vue'; import BackspaceIcon from '@icons/Mono/BackspaceIcon.vue'; import BadgeIcon from '@icons/Mono/BadgeIcon.vue'; import BallFootballIcon from '@icons/Mono/BallFootballIcon.vue'; import BallIcon from '@icons/Mono/BallIcon.vue'; import BanknoteIcon from '@icons/Mono/BanknoteIcon.vue'; import BellIcon from '@icons/Mono/BellIcon.vue'; import BellOffIcon from '@icons/Mono/BellOffIcon.vue'; import BoxIcon from '@icons/Mono/BoxIcon.vue'; import BrightnessIcon from '@icons/Mono/BrightnessIcon.vue'; import BulbIcon from '@icons/Mono/BulbIcon.vue'; import CalculatorIcon from '@icons/Mono/CalculatorIcon.vue'; import CalendarIcon from '@icons/Mono/CalendarIcon.vue'; import CalendarAddIcon from '@icons/Mono/CalendarAddIcon.vue'; import CalendarRemoveIcon from '@icons/Mono/CalendarRemoveIcon.vue'; import CardsIcon from '@icons/Mono/CardsIcon.vue'; import ChartLineIcon from '@icons/Mono/ChartLineIcon.vue'; import ChartPieIcon from '@icons/Mono/ChartPieIcon.vue'; import ChatIcon from '@icons/Mono/ChatIcon.vue'; import ChatWritingIcon from '@icons/Mono/ChatWritingIcon.vue'; import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue'; import ChemistryFlaskIcon from '@icons/Mono/ChemistryFlaskIcon.vue'; import CodeIcon from '@icons/Mono/CodeIcon.vue'; import CoinsIcon from '@icons/Mono/CoinsIcon.vue'; import ColorPaletteIcon from '@icons/Mono/ColorPaletteIcon.vue'; import CompassIcon from '@icons/Mono/CompassIcon.vue'; import ConstructionWorkerIcon from '@icons/Mono/ConstructionWorkerIcon.vue'; import ContactsIcon from '@icons/Mono/ContactsIcon.vue'; import CropIcon from '@icons/Mono/CropIcon.vue'; import CrossCircleIcon from '@icons/Mono/CrossCircleIcon.vue'; import CrossIcon from '@icons/Mono/CrossIcon.vue'; import CubeIcon from '@icons/Mono/CubeIcon.vue'; import CupIcon from '@icons/Mono/CupIcon.vue'; import CursorIcon from '@icons/Mono/CursorIcon.vue'; import LineDashedIcon from '@icons/Mono/LineDashedIcon.vue'; import LineDiagonalIcon from '@icons/Mono/LineDiagonalIcon.vue'; import DiamondIcon from '@icons/Mono/DiamondIcon.vue'; import DiaryIcon from '@icons/Mono/DiaryIcon.vue'; import DiceIcon from '@icons/Mono/DiceIcon.vue'; import DigIcon from '@icons/Mono/DigIcon.vue'; import DislikeIcon from '@icons/Mono/DislikeIcon.vue'; import DisplayIcon from '@icons/Mono/DisplayIcon.vue'; import DocumentIcon from '@icons/Mono/DocumentIcon.vue'; import DollarIcon from '@icons/Mono/DollarIcon.vue'; import DotsHorizontalIcon from '@icons/Mono/DotsHorizontalIcon.vue'; import DotsVerticalIcon from '@icons/Mono/DotsVerticalIcon.vue'; import LineDottedIcon from '@icons/Mono/LineDottedIcon.vue'; import DownloadIcon from '@icons/Mono/DownloadIcon.vue'; import DropIcon from '@icons/Mono/DropIcon.vue'; import DumbbelIcon from '@icons/Mono/DumbbelIcon.vue'; import EarthIcon from '@icons/Mono/EarthIcon.vue'; import EditIcon from '@icons/Mono/EditIcon.vue'; import EyeIcon from '@icons/Mono/EyeIcon.vue'; import EncyclopediaIcon from '@icons/Mono/EncyclopediaIcon.vue'; import ExitIcon from '@icons/Mono/ExitIcon.vue'; import FeedbackIcon from '@icons/Mono/FeedbackIcon.vue'; import FilterIcon from '@icons/Mono/FilterIcon.vue'; import FingerprintIcon from '@icons/Mono/FingerprintIcon.vue'; import FireIcon from '@icons/Mono/FireIcon.vue'; import FlagIcon from '@icons/Mono/FlagIcon.vue'; import FlashIcon from '@icons/Mono/FlashIcon.vue'; import FlashlightIcon from '@icons/Mono/FlashlightIcon.vue'; import FolderLockIcon from '@icons/Mono/FolderLockIcon.vue'; import FrameIcon from '@icons/Mono/FrameIcon.vue'; import FullScreenIcon from '@icons/Mono/FullScreenIcon.vue'; import GameControllerIcon from '@icons/Mono/GameControllerIcon.vue'; import GiftIcon from '@icons/Mono/GiftIcon.vue'; import GlassesIcon from '@icons/Mono/GlassesIcon.vue'; import HamburgerIcon from '@icons/Mono/HamburgerIcon.vue'; import HandIcon from '@icons/Mono/HandIcon.vue'; import HomeIcon from '@icons/Mono/HomeIcon.vue'; import ImageEditIcon from '@icons/Mono/ImageEditIcon.vue'; import ImageIcon from '@icons/Mono/ImageIcon.vue'; import MoveIcon from '@icons/Mono/MoveIcon.vue'; import DocumentAddIcon from '@icons/Mono/DocumentAddIcon.vue'; import DocumentDeleteIcon from '@icons/Mono/DocumentDeleteIcon.vue'; import DocumentEditIcon from '@icons/Mono/DocumentEditIcon.vue'; import ParagraphIcon from '@icons/Mono/ParagraphIcon.vue'; import PhoneHandsetIcon from '@icons/Mono/PhoneHandsetIcon.vue'; import PlusCircleIcon from '@icons/Mono/PlusCircleIcon.vue'; import PlusIcon from '@icons/Mono/PlusIcon.vue'; import PointerIcon from '@icons/Mono/PointerIcon.vue'; import SaveIcon from '@icons/Mono/SaveIcon.vue'; import SearchIcon from '@icons/Mono/SearchIcon.vue'; import SettingsIcon from '@icons/Mono/SettingsIcon.vue'; import SortHorizontalIcon from '@icons/Mono/SortHorizontalIcon.vue'; import SortDownIcon from '@icons/Mono/SortDownIcon.vue'; import SortUpIcon from '@icons/Mono/SortUpIcon.vue'; import SortVerticalIcon from '@icons/Mono/SortVerticalIcon.vue'; import LineIcon from '@icons/Mono/LineIcon.vue'; import TableIcon from '@icons/Mono/TableIcon.vue'; import TrashIcon from '@icons/Mono/TrashIcon.vue'; import UserIcon from '@icons/Mono/UserIcon.vue'; import ArrowsVerticalIcon from '@icons/Mono/ArrowsVerticalIcon.vue'; import TriangleIcon from '@icons/Mono/TriangleIcon.vue'; import Playground from '@/Playground.vue'; import ArrowShortDownIcon from '@icons/Mono/ArrowDownShortIcon.vue'; import StarIcon from '@icons/Mono/StarIcon.vue'; import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue'; import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue'; import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue'; import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue'; import ArrowDoubleRightShortIcon from '@icons/Mono/ArrowDoubleRightShortIcon.vue'; const gentleIcons = { Age18Icon, AirplaneIcon, AlarmIcon, AlignRightIcon, AlignLeftIcon, AlignCenterIcon, AnchorIcon, AnchorLinkIcon, ArchiveIcon, ArrowLeftShortIcon, ArrowDoubleLeftShortIcon, ArrowForwardIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightShortIcon, ArrowDoubleRightShortIcon, ArrowShortDownIcon, ArrowsVerticalIcon, AtIcon, AwardIcon, BackspaceIcon, BadgeIcon, BallFootballIcon, BallIcon, BanknoteIcon, BellIcon, BellOffIcon, BoxIcon, BrightnessIcon, BulbIcon, CalculatorIcon, CalendarIcon, CalendarAddIcon, CalendarRemoveIcon, CardsIcon, ChartLineIcon, ChartPieIcon, ChatIcon, ChatWritingIcon, CheckMarkIcon, ChemistryFlaskIcon, CodeIcon, CoinsIcon, ColorPaletteIcon, CompassIcon, ConstructionWorkerIcon, ContactsIcon, CropIcon, CrossIcon, CrossCircleIcon, CubeIcon, CupIcon, CursorIcon, DiamondIcon, DiaryIcon, DiceIcon, DigIcon, DislikeIcon, DisplayIcon, DocumentIcon, DocumentAddIcon, DocumentDeleteIcon, DocumentEditIcon, DollarIcon, DotsHorizontalIcon, DotsVerticalIcon, DownloadIcon, DropIcon, DumbbelIcon, EarthIcon, EditIcon, EncyclopediaIcon, ExitIcon, EyeIcon, FeedbackIcon, FilterIcon, FingerprintIcon, FireIcon, FlagIcon, FlashIcon, FlashlightIcon, FolderLockIcon, FrameIcon, FullScreenIcon, GameControllerIcon, GiftIcon, GlassesIcon, HamburgerIcon, HandIcon, HomeIcon, ImageIcon, ImageEditIcon, LineIcon, LineDashedIcon, LineDottedIcon, LineDiagonalIcon, MoveIcon, ParagraphIcon, PhoneHandsetIcon, PlusCircleIcon, PlusIcon, PointerIcon, SaveIcon, SearchIcon, SettingsIcon, StarIcon, StarFilledIcon, SortDownIcon, SortHorizontalIcon, SortUpIcon, SortVerticalIcon, TableIcon, TrashIcon, TriangleIcon, UserIcon, }; </script> <template> <main class="main"> <h2 class="title"><span class="mono">Mono</span> icons</h2> <ul class="iconsList"> <li class="iconsItem" v-for="icon of Object.entries(gentleIcons)" :key="icon[0]"> <component :is="icon[1]" class="icon" /> <span class="iconName">{{ icon[0].slice(0, -4) }}</span> </li> </ul> <Playground /> </main> </template> <style scoped> .main { margin: 20px; font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .title { font-size: 48px; width: max-content; margin: 0 auto 40px auto; } .iconsList { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px; } .iconsItem { font-size: 14px; } .icon { display: block; width: max-content; margin: 0 auto 5px auto; } .iconName { font-weight: bold; display: block; width: max-content; margin: 0 auto; } .mono { color: green; font-style: italic; } </style>