@designcrowd/fe-shared-lib 1.1.7 → 1.1.8

package/src/atoms/components/Icon/Icon.vue

@@ -1,819 +1,825 @@
-<template>
-  <div :class="computedClass">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      :viewBox="viewBox"
-      class="tw-fill-current"
-      :class="{
-        'tw-w-3 tw-h-3': size === 'xs',
-        'tw-w-4 tw-h-4': size === 'sm',
-        'tw-w-6 tw-h-6': size === 'md',
-        'tw-w-8 tw-h-8': size === 'lg',
-        'tw-w-10 tw-h-10': size === 'xl',
-        'tw-w-12 tw-h-12': size === '2xl',
-        'tw-w-14 tw-h-14': size === '3xl',
-        'tw-w-16 tw-h-16': size === '4xl',
-        'tw-w-full tw-h-full': size === 'full',
-        'tw-w-fit tw-h-full': size === 'button-icon',
-      }"
-      role="graphics-symbol"
-      aria-labelledby="title"
-      aria-describedby="desc"
-    >
-      <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
-      <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
-      <component :is="`icon-${iconName}`"></component>
-    </svg>
-  </div>
-</template>
-<script>
-/* eslint-disable camelcase */
-import IconAspectRatio1_1 from './icons/ratio-1-1.vue';
-import IconAspectRatio2_3 from './icons/ratio-2-3.vue';
-import IconAspectRatio3_2 from './icons/ratio-3-2.vue';
-import IconAspectRatio3_4 from './icons/ratio-3-4.vue';
-import IconAspectRatio4_3 from './icons/ratio-4-3.vue';
-import IconAspectRatio9_16 from './icons/ratio-9-16.vue';
-import IconAspectRatio16_9 from './icons/ratio-16-9.vue';
-/* eslint-enable camelcase */
-import IconAspectRatioCircle from './icons/ratio-circle.vue';
-import IconAspectRatioOriginal from './icons/ratio-original.vue';
-import IconArrowTopRight from './icons/arrow-top-right.vue';
-import IconAbout from './icons/about.vue';
-import IconAddPage from './icons/add-page.vue';
-import IconAi from './icons/ai.vue';
-import IconArrowDown from './icons/arrow-down.vue';
-import IconArrowLeft from './icons/arrow-left.vue';
-import IconArrowRight from './icons/arrow-right.vue';
-import IconArrowUp from './icons/arrow-up.vue';
-import IconArrowUpUnderline from './icons/arrow-up-underline.vue';
-import IconAttach from './icons/attach.vue';
-import IconAuthFacebook from './icons/auth-facebook.vue';
-import IconAuthFacebookWhite from './icons/auth-facebook-white.vue';
-import IconAuthGoogle from './icons/auth-google.vue';
-import IconBcMast from './icons/bc-mast.vue';
-import IconBackground from './icons/background.vue';
-import IconBanner from './icons/banner.vue';
-import IconBannerCentered from './icons/banner-centered.vue';
-import IconBannerLeft from './icons/banner-left.vue';
-import IconBrush from './icons/brush.vue';
-import IconBusiness from './icons/business.vue';
-import IconBusinessCardFilled from './icons/business-card-filled.vue';
-import IconButton from './icons/button.vue';
-import IconButtonArrow from './icons/buttons/button-arrow.vue';
-import IconButtonArrowLeft from './icons/buttons/button-arrow-left.vue';
-import IconButtonArrowRight from './icons/buttons/button-arrow-right.vue';
-import IconButtonBrushstroke from './icons/buttons/button-brushstroke.vue';
-import IconButtonBrushstrokeLeft from './icons/buttons/button-brushstroke-left.vue';
-import IconButtonBrushstrokeRight from './icons/buttons/button-brushstroke-right.vue';
-import IconButtonDashedOval from './icons/buttons/button-dashed-oval.vue';
-import IconButtonDashedRectangle from './icons/buttons/button-dashed-rectangle.vue';
-import IconButtonDashedRounded from './icons/buttons/button-dashed-rounded.vue';
-import IconButtonDoublelineOval from './icons/buttons/button-doubleline-oval.vue';
-import IconButtonDoublelineRectangle from './icons/buttons/button-doubleline-rectangle.vue';
-import IconButtonDoublelineRounded from './icons/buttons/button-doubleline-rounded.vue';
-import IconButtonJustified from './icons/button-justified.vue';
-import IconButtonPaper from './icons/buttons/button-paper.vue';
-import IconButtonPaperTop from './icons/buttons/button-paper-top.vue';
-import IconButtonPaperBottom from './icons/buttons/button-paper-bottom.vue';
-import IconButtonSoftshadowOval from './icons/buttons/button-softshadow-oval.vue';
-import IconButtonSoftshadowRectangle from './icons/buttons/button-softshadow-rectangle.vue';
-import IconButtonSoftshadowRounded from './icons/buttons/button-softshadow-rounded.vue';
-import IconCalendar from './icons/calendar.vue';
-import IconCalloutError from './icons/callout-error.vue';
-import IconCalloutInfo from './icons/callout-info.vue';
-import IconCalloutSuccess from './icons/callout-success.vue';
-import IconCalloutWarning from './icons/callout-warning.vue';
-import IconCap from './icons/cap.vue';
-import IconCard from './icons/card.vue';
-import IconCartEmpty from './icons/cart-empty.vue';
-import IconCheck from './icons/check.vue';
-import IconCheckThin from './icons/check-thin.vue';
-import IconChevronDown from './icons/chevron-down.vue';
-import IconChevronLeft from './icons/chevron-left.vue';
-import IconChevronRight from './icons/chevron-right.vue';
-import IconChevronRightWide from './icons/chevron-right-wide.vue';
-import IconChevronUp from './icons/chevron-up.vue';
-import IconClose from './icons/close.vue';
-import IconCommunity from './icons/community.vue';
-import IconContent from './icons/content.vue';
-import IconColumn1 from './icons/column-1.vue';
-import IconColumn2 from './icons/column-2.vue';
-import IconColumn3 from './icons/column-3.vue';
-import IconColumn4 from './icons/column-4.vue';
-import IconCopy from './icons/copy.vue';
-import IconDelete from './icons/delete.vue';
-import IconDesigns from './icons/designs.vue';
-import IconDesktop from './icons/desktop.vue';
-import IconDivider from './icons/divider.vue';
-import IconDividerThin from './icons/divider-thin.vue';
-import IconDividerThick from './icons/divider-thick.vue';
-import IconDonate from './icons/donate.vue';
-import IconDownload from './icons/download.vue';
-import IconDuplicate from './icons/duplicate.vue';
-import IconEdit from './icons/edit.vue';
-import IconEditLine from './icons/edit-line.vue';
-import IconError from './icons/error.vue';
-import IconEllipsis from './icons/ellipsis.vue';
-import IconEnvelopeEmail from './icons/envelope-email.vue';
-import IconEyeCrossed from './icons/eye-crossed.vue';
-import IconFees from './icons/fees.vue';
-import IconFilter from './icons/filter.vue';
-import IconFilterCrazyDomains from './icons/crazy-domains/filter.vue';
-import IconFlag from './icons/flag.vue';
-import IconFolder from './icons/folder.vue';
-import IconForm from './icons/form.vue';
-import IconFullscreen from './icons/fullscreen.vue';
-import IconFullscreenExit from './icons/fullscreen-exit.vue';
-import IconGlobe from './icons/globe.vue';
-import IconGlobeCrazyDomains from './icons/crazy-domains/globe.vue';
-import IconHamburger from './icons/hamburger.vue';
-import IconHamburger1 from './icons/hamburger-1.vue';
-import IconHamburger2 from './icons/hamburger-2.vue';
-import IconHamburger3 from './icons/hamburger-3.vue';
-import IconHamburger4 from './icons/hamburger-4.vue';
-import IconHome from './icons/home.vue';
-import IconHomeCrazyDomains from './icons/crazy-domains/home.vue';
-import IconImagesGallery from './icons/images-gallery.vue';
-import IconImageGalleryGrid from './icons/image-gallery-grid.vue';
-import IconImageGalleryCarousel from './icons/image-gallery-carousel.vue';
-import IconImageGalleryMasonry from './icons/image-gallery-masonry.vue';
-import IconImages from './icons/images.vue';
-import IconInfo from './icons/info.vue';
-import IconJobs from './icons/jobs.vue';
-import IconDisplayStyleAbout1 from './icons/layout/display-style-about-1.vue';
-import IconDisplayStyleAbout2 from './icons/layout/display-style-about-2.vue';
-import IconDisplayStyleAbout3 from './icons/layout/display-style-about-3.vue';
-import IconDisplayStyleAbout4 from './icons/layout/display-style-about-4.vue';
-import IconDisplayStyleAbout5 from './icons/layout/display-style-about-5.vue';
-import IconDisplayStyleAbout6 from './icons/layout/display-style-about-6.vue';
-import IconDisplayStyleImages1 from './icons/layout/display-style-images-1.vue';
-import IconDisplayStyleImages2 from './icons/layout/display-style-images-2.vue';
-import IconDisplayStyleImages3 from './icons/layout/display-style-images-3.vue';
-import IconDisplayStyleImages4 from './icons/layout/display-style-images-4.vue';
-import IconDisplayStyleImages5 from './icons/layout/display-style-images-5.vue';
-import IconDisplayStyleImages6 from './icons/layout/display-style-images-6.vue';
-import IconDisplayStyleBanner1 from './icons/layout/display-style-banner-1.vue';
-import IconDisplayStyleBanner2 from './icons/layout/display-style-banner-2.vue';
-import IconDisplayStyleBanner3 from './icons/layout/display-style-banner-3.vue';
-import IconDisplayStyleBanner4 from './icons/layout/display-style-banner-4.vue';
-import IconDisplayStyleBanner5 from './icons/layout/display-style-banner-5.vue';
-import IconDisplayStyleBanner6 from './icons/layout/display-style-banner-6.vue';
-import IconDisplayStyleBanner7 from './icons/layout/display-style-banner-7.vue';
-import IconDisplayStyleBanner8 from './icons/layout/display-style-banner-8.vue';
-import IconDisplayStyleBanner9 from './icons/layout/display-style-banner-9.vue';
-import IconDisplayStyleContact1 from './icons/layout/display-style-contact-1.vue';
-import IconDisplayStyleContact2 from './icons/layout/display-style-contact-2.vue';
-import IconDisplayStyleContact4 from './icons/layout/display-style-contact-4.vue';
-import IconDisplayStyleContact5 from './icons/layout/display-style-contact-5.vue';
-import IconDisplayStyleContact6 from './icons/layout/display-style-contact-6.vue';
-
-import IconNavStyleTabDisplayStyle1 from './icons/layout/nav/tab/display-style-1.vue';
-import IconNavStyleTabDisplayStyle2 from './icons/layout/nav/tab/display-style-2.vue';
-import IconNavStyleHamburgerDisplayStyle1 from './icons/layout/nav/hamburger/display-style-1.vue';
-import IconNavStyleHamburgerDisplayStyle2 from './icons/layout/nav/hamburger/display-style-2.vue';
-import IconNavStyleHamburgerDisplayStyle3 from './icons/layout/nav/hamburger/display-style-3.vue';
-import IconNavStyleHamburgerDisplayStyle4 from './icons/layout/nav/hamburger/display-style-4.vue';
-
-import IconHeaderNavStyleTabDisplayStyleNoLogo1 from './icons/layout/header/tab-display-style-no-logo-1.vue';
-import IconHeaderNavStyleTabDisplayStyleNoLogo2 from './icons/layout/header/tab-display-style-no-logo-2.vue';
-import IconHeaderNavStyleTabDisplayStyleNoLogo3 from './icons/layout/header/tab-display-style-no-logo-3.vue';
-import IconHeaderNavStyleHamburgerDisplayStyleNoLogo1 from './icons/layout/header/hamburger-display-style-no-logo-1.vue';
-import IconHeaderNavStyleHamburgerDisplayStyleNoLogo2 from './icons/layout/header/hamburger-display-style-no-logo-2.vue';
-import IconHeaderNavStyleHamburgerDisplayStyleNoLogo3 from './icons/layout/header/hamburger-display-style-no-logo-3.vue';
-
-import IconHeaderDesktopNavStyleTabDisplayStyle1 from './icons/layout/header/desktop-tab-display-style-1.vue';
-import IconHeaderDesktopNavStyleTabDisplayStyle2 from './icons/layout/header/desktop-tab-display-style-2.vue';
-import IconHeaderDesktopNavStyleTabDisplayStyle3 from './icons/layout/header/desktop-tab-display-style-3.vue';
-import IconHeaderDesktopNavStyleTabDisplayStyle4 from './icons/layout/header/desktop-tab-display-style-4.vue';
-import IconHeaderDesktopNavStyleTabDisplayStyle5 from './icons/layout/header/desktop-tab-display-style-5.vue';
-import IconHeaderDesktopNavStyleTabDisplayStyle6 from './icons/layout/header/desktop-tab-display-style-6.vue';
-import IconHeaderMobileNavStyleTabDisplayStyle1 from './icons/layout/header/mobile-tab-display-style-1.vue';
-import IconHeaderMobileNavStyleTabDisplayStyle2 from './icons/layout/header/mobile-tab-display-style-2.vue';
-
-import IconHeaderDesktopNavStyleHamburgerDisplayStyle1 from './icons/layout/header/desktop-hamburger-display-style-1.vue';
-import IconHeaderDesktopNavStyleHamburgerDisplayStyle2 from './icons/layout/header/desktop-hamburger-display-style-2.vue';
-import IconHeaderMobileNavStyleHamburgerDisplayStyle1 from './icons/layout/header/mobile-hamburger-display-style-1.vue';
-import IconHeaderMobileNavStyleHamburgerDisplayStyle2 from './icons/layout/header/mobile-hamburger-display-style-2.vue';
-import IconHeaderMobileNavStyleHamburgerDisplayStyle3 from './icons/layout/header/mobile-hamburger-display-style-3.vue';
-import IconHeaderMobileNavStyleHamburgerDisplayStyle4 from './icons/layout/header/mobile-hamburger-display-style-4.vue';
-
-import IconFooterCentered from './icons/footer-centered.vue'; // TODO - @deprecate
-import IconFooterLeft from './icons/footer-left.vue'; // TODO - @deprecate
-import IconFooterDisplayStyle1 from './icons/layout/footer/display-style-1.vue';
-import IconFooterDisplayStyle2 from './icons/layout/footer/display-style-2.vue';
-
-import IconLetterheadFilled from './icons/letterhead-filled.vue';
-import IconLink from './icons/link.vue';
-import IconLocation from './icons/location.vue';
-import IconLock from './icons/lock.vue';
-import IconMacosCommand from './icons/mac-command.vue';
-import IconMap from './icons/map.vue';
-import IconMessage from './icons/message.vue';
-import IconMug from './icons/mug.vue';
-
-import IconFormMessage from './icons/form-message.vue';
-import IconContactMessage from './icons/contact-message.vue';
-import IconMinus from './icons/minus.vue';
-import IconMinusCircleLight from './icons/minus-circle-light.vue';
-import IconMobile from './icons/mobile.vue';
-import IconOther from './icons/other.vue';
-import IconPalette from './icons/palette.vue';
-import IconPageButtons from './icons/page-buttons.vue';
-import IconPageHamburger from './icons/page-hamburger.vue';
-import IconPageTabs from './icons/page-tabs.vue';
-import IconPages from './icons/pages.vue';
-import IconPause from './icons/pause.vue';
-import IconPayment from './icons/payment.vue';
-import IconPaymentsFeatured from './icons/payments-featured.vue';
-import IconPaymentsTextonly from './icons/payments-textonly.vue';
-import IconPaymentsThumbnail from './icons/payments-thumbnail.vue';
-import IconPhone from './icons/phone.vue';
-import IconPlus from './icons/plus.vue';
-import IconPlusCircle from './icons/plus-circle.vue';
-import IconPlusCircleLight from './icons/plus-circle-light.vue';
-import IconPoll from './icons/poll.vue';
-import IconPortfolio from './icons/portfolio.vue';
-import IconPreview from './icons/preview.vue';
-import IconPrinting from './icons/printing.vue';
-import IconProcessing from './icons/processing.vue';
-import IconQuestion from './icons/question.vue';
-import IconReload from './icons/reload.vue';
-import IconReorderable from './icons/reorderable.vue';
-import IconRequestPayment from './icons/request-payment.vue';
-import IconShop from './icons/shop.vue';
-import IconSearch from './icons/search.vue';
-import IconSecure from './icons/secure.vue';
-import IconServices from './icons/services.vue';
-import IconSettings from './icons/settings.vue';
-import IconShare from './icons/share.vue';
-import IconSms from './icons/sms.vue';
-import IconSocialFacebook from './icons/social-facebook.vue';
-import IconSocialFacebookColor from './icons/social-facebook-color.vue';
-import IconSocialFacebookCrazyDomains from './icons/crazy-domains/social-facebook.vue';
-import IconSocialGoogle from './icons/social-google.vue';
-import IconSocialGoogleCrazyDomains from './icons/crazy-domains/social-google.vue';
-import IconSocialInstagramColor from './icons/social-instagram-color.vue';
-import IconSocialInstagramCrazyDomains from './icons/crazy-domains/social-instagram.vue';
-import IconSocialLinkedinColor from './icons/social-linkedin-color.vue';
-import IconSocialTwitterColor from './icons/social-twitter-color.vue';
-import IconSocialTwitterCrazyDomains from './icons/crazy-domains/social-twitter.vue';
-import IconSocialYoutubeCrazyDomains from './icons/crazy-domains/social-youtube.vue';
-import IconStarFilled from './icons/star-filled.vue';
-import IconStarHollow from './icons/star-hollow.vue';
-import IconSticker from './icons/sticker.vue';
-import IconStyles from './icons/styles.vue';
-import IconSubmit from './icons/submit.vue';
-import IconTemplates from './icons/templates.vue';
-import IconTextImage from './icons/text-image.vue';
-import IconTextImageLeft from './icons/text-image-left.vue';
-import IconTextImageCenter from './icons/text-image-center.vue';
-import IconTextImageOnly from './icons/text-image-only.vue';
-import IconTextImageRight from './icons/text-image-right.vue';
-import IconQuote from './icons/quote.vue';
-import IconTestimonialCentered from './icons/testimonial-centered.vue';
-import IconTestimonialColumns from './icons/testimonial-columns.vue';
-import IconTestimonialBigImage from './icons/testimonial-big-image.vue';
-import IconTextImageJustified from './icons/text-image-justified.vue';
-import IconTime from './icons/time.vue';
-import IconTooltipBottom from './icons/tooltip-bottom.vue';
-import IconTooltipLeft from './icons/tooltip-left.vue';
-import IconTooltipRight from './icons/tooltip-right.vue';
-import IconTooltipTop from './icons/tooltip-top.vue';
-import IconUpgrade from './icons/upgrade.vue';
-import IconUpgradeAlt from './icons/upgrade-alt.vue';
-import IconUpload from './icons/upload.vue';
-import IconUploadArrow from './icons/upload-arrow.vue';
-import IconUserAccounts from './icons/user-accounts.vue';
-import IconUserHeadset from './icons/user-headset.vue';
-import IconWatchlistFilled from './icons/watchlist-filled.vue';
-import IconWatchlistHollow from './icons/watchlist-hollow.vue';
-import IconWatchlistHollowAlt from './icons/watchlist-hollow-alt.vue';
-import IconWebsite from './icons/website.vue';
-import IconWebsiteFilled from './icons/website-filled.vue';
-import IconWholesale from './icons/wholesale.vue';
-import IconZoom from './icons/zoom.vue';
-import IconZoomIn from './icons/zoom-in.vue';
-import IconZoomOut from './icons/zoom-out.vue';
-import IconGodaddy from './icons/godaddy/logo.vue';
-import IconSocialShare from './icons/social-share.vue';
-import IconIconStyleNoBg from './icons/icon-style-no-bg.vue';
-import IconIconStyleCircleBg from './icons/icon-style-circle-bg.vue';
-import IconIconStyleSquareBg from './icons/icon-style-square-bg.vue';
-import IconCrop from './icons/crop.vue';
-
-import IconReset from './icons/reset.vue';
-import IconUndo from './icons/undo.vue';
-import IconRedo from './icons/redo.vue';
-import IconFilters from './icons/filters.vue';
-import IconLayer from './icons/layer.vue';
-import IconLayerBringFront from './icons/layer-bring-front.vue';
-import IconLayerSendBack from './icons/layer-send-back.vue';
-import IconOpacity from './icons/opacity.vue';
-
-import IconBan from './icons/ban.vue';
-import IconShape from './icons/shape.vue';
-
-// Maker Icons
-import IconMakerAnimate from './icons/maker/animate.vue';
-import IconMakerCustomLandscape from './icons/maker/custom-landscape.vue';
-import IconMakerEmail from './icons/maker/email.vue';
-import IconMakerEmailSymbol from './icons/maker/email-symbol.vue';
-import IconMakerEtsy from './icons/maker/etsy.vue';
-import IconMakerFacebook from './icons/maker/facebook.vue';
-import IconMakerFavicon from './icons/maker/favicon.vue';
-import IconMakerFlyer from './icons/maker/flyer.vue';
-import IconMakerGiftCertificate from './icons/maker/gift-certificate.vue';
-import IconMakerGlobe from './icons/maker/globe.vue';
-import IconMakerImage from './icons/maker/image.vue';
-import IconMakerInstagram from './icons/maker/instagram.vue';
-import IconMakerInvitation from './icons/maker/invitation.vue';
-import IconMakerInvoice from './icons/maker/invoice.vue';
-import IconMakerLink from './icons/maker/link.vue';
-import IconMakerLinkedin from './icons/maker/linkedin.vue';
-import IconMakerMenu from './icons/maker/menu.vue';
-import IconMakerPhone from './icons/maker/phone.vue';
-import IconMakerPinterest from './icons/maker/pinterest.vue';
-import IconMakerPostcard from './icons/maker/postcard.vue';
-import IconMakerPoster from './icons/maker/poster.vue';
-import IconMakerProfile from './icons/maker/profile.vue';
-import IconMakerQrcode from './icons/maker/qrcode.vue';
-import IconMakerSnapchat from './icons/maker/snapchat.vue';
-import IconMakerSoundcloud from './icons/maker/soundcloud.vue';
-import IconMakerText from './icons/maker/text.vue';
-import IconMakerThankyouCard from './icons/maker/thankyou-card.vue';
-import IconMakerTiktok from './icons/maker/tiktok.vue';
-import IconMakerTShirt from './icons/maker/t-shirt.vue';
-import IconMakerTumblr from './icons/maker/tumblr.vue';
-import IconMakerTwitch from './icons/maker/twitch.vue';
-import IconMakerTwitter from './icons/maker/twitter.vue';
-import IconMakerUppercase from './icons/maker/uppercase.vue';
-import IconMakerVideo from './icons/maker/video.vue';
-import IconMakerWhatsapp from './icons/maker/whatsapp.vue';
-import IconMakerYoutube from './icons/maker/youtube.vue';
-import IconMakerZoom from './icons/maker/zoom.vue';
-import IconMakerAlignCenter from './icons/maker/align-center.vue';
-import IconMakerAlignJustify from './icons/maker/align-justify.vue';
-import IconMakerAlignLeft from './icons/maker/align-left.vue';
-import IconMakerAlignRight from './icons/maker/align-right.vue';
-import IconMakerItalic from './icons/maker/italic.vue';
-import IconMakerBold from './icons/maker/bold.vue';
-import IconMakerUnderline from './icons/maker/underline.vue';
-import IconMakerStrikethrough from './icons/maker/strikethrough.vue';
-import IconMakerPlay from './icons/maker/play.vue';
-import IconMakerPause from './icons/maker/pause.vue';
-import IconMakerEraser from './icons/maker/eraser.vue';
-
-// Maker layout tab icons
-import IconLayoutIbnTcn from './icons/layout/layout-icon-bottom-normal-text-center-normal.vue';
-import IconLayoutIbnTcs from './icons/layout/layout-icon-bottom-normal-text-center-small.vue';
-import IconLayoutIbsTcn from './icons/layout/layout-icon-bottom-small-text-center-normal.vue';
-import IconLayoutIcnCtc from './icons/layout/layout-icon-center-normal-curved-text-circle.vue';
-import IconLayoutIcnCtt from './icons/layout/layout-icon-center-normal-curved-text-top.vue';
-import IconLayoutIcnCtb from './icons/layout/layout-icon-center-normal-curved-text-bottom.vue';
-import IconLayoutItnTjn from './icons/layout/layout-icon-top-normal-text-justify-normal.vue';
-import IconLayoutIlnTjn from './icons/layout/layout-icon-left-normal-text-justify-normal.vue';
-import IconLayoutIrnTjn from './icons/layout/layout-icon-right-normal-text-justify-normal.vue';
-import IconLayoutIlnTcn from './icons/layout/layout-icon-left-normal-text-center-normal.vue';
-import IconLayoutIlnTln from './icons/layout/layout-icon-left-normal-text-left-normal.vue';
-import IconLayoutIlsTln from './icons/layout/layout-icon-left-small-text-left-normal.vue';
-import IconLayoutIrnTcn from './icons/layout/layout-icon-right-normal-text-center-normal.vue';
-import IconLayoutIrnTrn from './icons/layout/layout-icon-right-normal-text-right-normal.vue';
-import IconLayoutIrsTrn from './icons/layout/layout-icon-right-small-text-right-normal.vue';
-import IconLayoutItnTcn from './icons/layout/layout-icon-top-normal-text-center-normal.vue';
-import IconLayoutItnTcs from './icons/layout/layout-icon-top-normal-text-center-small.vue';
-import IconLayoutItsTcn from './icons/layout/layout-icon-top-small-text-center-normal.vue';
-
-import IconFlipHorizontal from './icons/flip-horizontal.vue';
-import IconFlipVertical from './icons/flip-vertical.vue';
-
-import IconVolume from './icons/volume.vue';
-import IconVolumeMuted from './icons/volume-muted.vue';
-
-export default {
-  components: {
-    IconAbout,
-    IconAddPage,
-    IconAi,
-    IconArrowDown,
-    IconArrowLeft,
-    IconArrowRight,
-    IconArrowUp,
-    IconArrowUpUnderline,
-    IconAttach,
-    IconAuthFacebook,
-    IconAuthFacebookWhite,
-    IconAuthGoogle,
-    IconBcMast,
-    IconBackground,
-    IconBanner,
-    IconBannerCentered,
-    IconBannerLeft,
-    IconBrush,
-    IconBusiness,
-    IconBusinessCardFilled,
-    IconButton,
-    IconButtonArrow,
-    IconButtonArrowLeft,
-    IconButtonArrowRight,
-    IconButtonBrushstroke,
-    IconButtonBrushstrokeLeft,
-    IconButtonBrushstrokeRight,
-    IconButtonDashedOval,
-    IconButtonDashedRectangle,
-    IconButtonDashedRounded,
-    IconButtonDoublelineOval,
-    IconButtonDoublelineRectangle,
-    IconButtonDoublelineRounded,
-    IconButtonJustified,
-    IconButtonPaper,
-    IconButtonPaperTop,
-    IconButtonPaperBottom,
-    IconButtonSoftshadowOval,
-    IconButtonSoftshadowRectangle,
-    IconButtonSoftshadowRounded,
-    IconCalendar,
-    IconCalloutError,
-    IconCalloutInfo,
-    IconCalloutSuccess,
-    IconCalloutWarning,
-    IconCap,
-    IconCard,
-    IconCartEmpty,
-    IconCheck,
-    IconCheckThin,
-    IconChevronDown,
-    IconChevronLeft,
-    IconChevronRight,
-    IconChevronRightWide,
-    IconChevronUp,
-    IconClose,
-    IconCommunity,
-    IconContent,
-    IconColumn1,
-    IconColumn2,
-    IconColumn3,
-    IconColumn4,
-    IconCopy,
-    IconDelete,
-    IconDesigns,
-    IconDesktop,
-    IconDivider,
-    IconDividerThick,
-    IconDividerThin,
-    IconDonate,
-    IconDownload,
-    IconDuplicate,
-    IconEdit,
-    IconEditLine,
-    IconEllipsis,
-    IconError,
-    IconEnvelopeEmail,
-    IconEyeCrossed,
-    IconFees,
-    IconFilter,
-    IconFilterCrazyDomains,
-    IconFlag,
-    IconFolder,
-    IconFullscreen,
-    IconFullscreenExit,
-    IconGlobe,
-    IconGlobeCrazyDomains,
-    IconGodaddy,
-    IconHamburger,
-    IconHamburger1,
-    IconHamburger2,
-    IconHamburger3,
-    IconHamburger4,
-
-    IconNavStyleTabDisplayStyle1,
-    IconNavStyleTabDisplayStyle2,
-    IconNavStyleHamburgerDisplayStyle1,
-    IconNavStyleHamburgerDisplayStyle2,
-    IconNavStyleHamburgerDisplayStyle3,
-    IconNavStyleHamburgerDisplayStyle4,
-
-    IconHeaderDesktopNavStyleTabDisplayStyle1,
-    IconHeaderDesktopNavStyleTabDisplayStyle2,
-    IconHeaderDesktopNavStyleTabDisplayStyle3,
-    IconHeaderDesktopNavStyleTabDisplayStyle4,
-    IconHeaderDesktopNavStyleTabDisplayStyle5,
-    IconHeaderDesktopNavStyleTabDisplayStyle6,
-    IconHeaderNavStyleTabDisplayStyleNoLogo1,
-    IconHeaderNavStyleTabDisplayStyleNoLogo2,
-    IconHeaderNavStyleTabDisplayStyleNoLogo3,
-    IconHeaderMobileNavStyleTabDisplayStyle1,
-    IconHeaderMobileNavStyleTabDisplayStyle2,
-
-    IconHeaderDesktopNavStyleHamburgerDisplayStyle1,
-    IconHeaderDesktopNavStyleHamburgerDisplayStyle2,
-    IconHeaderNavStyleHamburgerDisplayStyleNoLogo1,
-    IconHeaderNavStyleHamburgerDisplayStyleNoLogo2,
-    IconHeaderNavStyleHamburgerDisplayStyleNoLogo3,
-    IconHeaderMobileNavStyleHamburgerDisplayStyle1,
-    IconHeaderMobileNavStyleHamburgerDisplayStyle2,
-    IconHeaderMobileNavStyleHamburgerDisplayStyle3,
-    IconHeaderMobileNavStyleHamburgerDisplayStyle4,
-
-    IconFooterDisplayStyle1,
-    IconFooterDisplayStyle2,
-    IconFooterCentered,
-    IconFooterLeft,
-
-    IconHome,
-    IconHomeCrazyDomains,
-    IconIconStyleNoBg,
-    IconIconStyleCircleBg,
-    IconIconStyleSquareBg,
-    IconImagesGallery,
-    IconImageGalleryGrid,
-    IconImageGalleryCarousel,
-    IconImageGalleryMasonry,
-    IconImages,
-    IconInfo,
-    IconJobs,
-    IconDisplayStyleAbout1,
-    IconDisplayStyleAbout2,
-    IconDisplayStyleAbout3,
-    IconDisplayStyleAbout4,
-    IconDisplayStyleAbout5,
-    IconDisplayStyleAbout6,
-    IconDisplayStyleImages1,
-    IconDisplayStyleImages2,
-    IconDisplayStyleImages3,
-    IconDisplayStyleImages4,
-    IconDisplayStyleImages5,
-    IconDisplayStyleImages6,
-    IconDisplayStyleBanner1,
-    IconDisplayStyleBanner2,
-    IconDisplayStyleBanner3,
-    IconDisplayStyleBanner4,
-    IconDisplayStyleBanner5,
-    IconDisplayStyleBanner6,
-    IconDisplayStyleBanner7,
-    IconDisplayStyleBanner8,
-    IconDisplayStyleBanner9,
-    IconDisplayStyleContact1,
-    IconDisplayStyleContact2,
-    IconDisplayStyleContact4,
-    IconDisplayStyleContact5,
-    IconDisplayStyleContact6,
-    IconLetterheadFilled,
-    IconLink,
-    IconLocation,
-    IconLock,
-    IconMacosCommand,
-    IconMap,
-    IconMessage,
-    IconForm,
-    IconFormMessage,
-    IconContactMessage,
-    IconMinus,
-    IconMinusCircleLight,
-    IconMobile,
-    IconMug,
-    IconOther,
-    IconPages,
-    IconPause,
-    IconPageButtons,
-    IconPageHamburger,
-    IconPageTabs,
-    IconPalette,
-    IconPayment,
-    IconPaymentsFeatured,
-    IconPaymentsTextonly,
-    IconPaymentsThumbnail,
-    IconPhone,
-    IconPlus,
-    IconPlusCircle,
-    IconPlusCircleLight,
-    IconPoll,
-    IconPortfolio,
-    IconPreview,
-    IconPrinting,
-    IconProcessing,
-    IconQuestion,
-    IconQuote,
-    IconReload,
-    IconReorderable,
-    IconRequestPayment,
-    IconShop,
-    IconSearch,
-    IconSecure,
-    IconServices,
-    IconSettings,
-    IconShare,
-    IconSms,
-    IconSocialFacebook,
-    IconSocialFacebookColor,
-    IconSocialFacebookCrazyDomains,
-    IconSocialGoogle,
-    IconSocialGoogleCrazyDomains,
-    IconSocialInstagramColor,
-    IconSocialInstagramCrazyDomains,
-    IconSocialLinkedinColor,
-    IconSocialShare,
-    IconSocialTwitterColor,
-    IconSocialTwitterCrazyDomains,
-    IconSocialYoutubeCrazyDomains,
-    IconStarFilled,
-    IconStarHollow,
-    IconSticker,
-    IconStyles,
-    IconSubmit,
-    IconTemplates,
-    IconTextImage,
-    IconTextImageLeft,
-    IconTextImageCenter,
-    IconTextImageOnly,
-    IconTextImageRight,
-    IconTextImageJustified,
-    IconTestimonialCentered,
-    IconTestimonialColumns,
-    IconTestimonialBigImage,
-    IconTime,
-    IconTooltipBottom,
-    IconTooltipLeft,
-    IconTooltipRight,
-    IconTooltipTop,
-    IconUpgrade,
-    IconUpgradeAlt,
-    IconUpload,
-    IconUploadArrow,
-    IconUserAccounts,
-    IconUserHeadset,
-    IconWatchlistFilled,
-    IconWatchlistHollow,
-    IconWatchlistHollowAlt,
-    IconWebsite,
-    IconWebsiteFilled,
-    IconWholesale,
-    IconZoom,
-    IconZoomIn,
-    IconZoomOut,
-    IconReset,
-    IconUndo,
-    IconRedo,
-    IconFilters,
-    IconLayer,
-    IconLayerBringFront,
-    IconLayerSendBack,
-    IconOpacity,
-    IconBan,
-    IconShape,
-
-    // Maker icons
-    IconMakerAnimate,
-    IconMakerCustomLandscape,
-    IconMakerEmail,
-    IconMakerEmailSymbol,
-    IconMakerEtsy,
-    IconMakerFacebook,
-    IconMakerFavicon,
-    IconMakerFlyer,
-    IconMakerGiftCertificate,
-    IconMakerGlobe,
-    IconMakerImage,
-    IconMakerInstagram,
-    IconMakerInvitation,
-    IconMakerInvoice,
-    IconMakerLink,
-    IconMakerLinkedin,
-    IconMakerMenu,
-    IconMakerPhone,
-    IconMakerPinterest,
-    IconMakerPostcard,
-    IconMakerPoster,
-    IconMakerProfile,
-    IconMakerQrcode,
-    IconMakerSnapchat,
-    IconMakerSoundcloud,
-    IconMakerText,
-    IconMakerThankyouCard,
-    IconMakerTiktok,
-    IconMakerTShirt,
-    IconMakerTumblr,
-    IconMakerTwitch,
-    IconMakerTwitter,
-    IconMakerUppercase,
-    IconMakerVideo,
-    IconMakerWhatsapp,
-    IconMakerYoutube,
-    IconMakerZoom,
-    IconMakerAlignCenter,
-    IconMakerAlignJustify,
-    IconMakerAlignLeft,
-    IconMakerAlignRight,
-    IconMakerItalic,
-    IconMakerBold,
-    IconMakerUnderline,
-    IconMakerStrikethrough,
-    IconMakerPlay,
-    IconMakerPause,
-    IconMakerEraser,
-    IconCrop,
-
-    // Layout
-    IconLayoutIbnTcn,
-    IconLayoutIbnTcs,
-    IconLayoutIbsTcn,
-    IconLayoutIcnCtc,
-    IconLayoutIcnCtt,
-    IconLayoutIcnCtb,
-    IconLayoutItnTjn,
-    IconLayoutIlnTjn,
-    IconLayoutIrnTjn,
-    IconLayoutIlnTln,
-    IconLayoutIlnTcn,
-    IconLayoutIlsTln,
-    IconLayoutIrnTcn,
-    IconLayoutIrnTrn,
-    IconLayoutIrsTrn,
-    IconLayoutItnTcn,
-    IconLayoutItnTcs,
-    IconLayoutItsTcn,
-
-    IconFlipHorizontal,
-    IconFlipVertical,
-
-    IconVolume,
-    IconVolumeMuted,
-    IconArrowTopRight,
-    /* eslint-disable camelcase */
-    IconAspectRatio1_1,
-    IconAspectRatio2_3,
-    IconAspectRatio3_2,
-    IconAspectRatio3_4,
-    IconAspectRatio4_3,
-    IconAspectRatio9_16,
-    IconAspectRatio16_9,
-    /* eslint-enable camelcase */
-    IconAspectRatioCircle,
-    IconAspectRatioOriginal,
-  },
-  props: {
-    viewBox: {
-      type: String,
-      required: false,
-      default: '0 0 16 16',
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    altText: {
-      type: String,
-      default: null,
-    },
-    color: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    size: {
-      type: String,
-      required: false,
-      default: 'sm',
-    },
-    classes: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      id: null,
-    };
-  },
-  computed: {
-    computedClass() {
-      const colorCss = this.color ? `tw-text-${this.color}` : '';
-      const css = `${colorCss} ${this.classes}`.trim();
-      return css || null;
-    },
-    title() {
-      return this.altText || `${this.titleCase(this.name)}`;
-    },
-    description() {
-      return `${this.title} Icon`;
-    },
-    iconName() {
-      if (this.name) {
-        return this.name.split(' ').join('-');
-      }
-
-      return this.name;
-    },
-  },
-  mounted() {
-    // eslint-disable-next-line no-underscore-dangle
-    this.id = this.$.uid;
-  },
-  methods: {
-    titleCase(word) {
-      return word.replace(/^[-]*(.)/, (_, c) => c.toUpperCase()).replace(/[-]+(.)/g, (_, c) => ` ${c.toUpperCase()}`);
-    },
-  },
-};
-</script>
+<template>
+  <div :class="computedClass">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :viewBox="viewBox"
+      class="tw-fill-current"
+      :class="{
+        'tw-w-3 tw-h-3': size === 'xs',
+        'tw-w-4 tw-h-4': size === 'sm',
+        'tw-w-6 tw-h-6': size === 'md',
+        'tw-w-8 tw-h-8': size === 'lg',
+        'tw-w-10 tw-h-10': size === 'xl',
+        'tw-w-12 tw-h-12': size === '2xl',
+        'tw-w-14 tw-h-14': size === '3xl',
+        'tw-w-16 tw-h-16': size === '4xl',
+        'tw-w-full tw-h-full': size === 'full',
+        'tw-w-fit tw-h-full': size === 'button-icon',
+      }"
+      role="graphics-symbol"
+      aria-labelledby="title"
+      aria-describedby="desc"
+    >
+      <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
+      <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
+      <component :is="`icon-${iconName}`"></component>
+    </svg>
+  </div>
+</template>
+<script>
+/* eslint-disable camelcase */
+import IconAspectRatio1_1 from './icons/ratio-1-1.vue';
+import IconAspectRatio2_3 from './icons/ratio-2-3.vue';
+import IconAspectRatio3_2 from './icons/ratio-3-2.vue';
+import IconAspectRatio3_4 from './icons/ratio-3-4.vue';
+import IconAspectRatio4_3 from './icons/ratio-4-3.vue';
+import IconAspectRatio9_16 from './icons/ratio-9-16.vue';
+import IconAspectRatio16_9 from './icons/ratio-16-9.vue';
+/* eslint-enable camelcase */
+import IconAspectRatioCircle from './icons/ratio-circle.vue';
+import IconAspectRatioOriginal from './icons/ratio-original.vue';
+import IconArrowTopRight from './icons/arrow-top-right.vue';
+import IconAbout from './icons/about.vue';
+import IconAddPage from './icons/add-page.vue';
+import IconAi from './icons/ai.vue';
+import IconArrowDown from './icons/arrow-down.vue';
+import IconArrowLeft from './icons/arrow-left.vue';
+import IconArrowRight from './icons/arrow-right.vue';
+import IconArrowUp from './icons/arrow-up.vue';
+import IconArrowUpUnderline from './icons/arrow-up-underline.vue';
+import IconAttach from './icons/attach.vue';
+import IconAuthFacebook from './icons/auth-facebook.vue';
+import IconAuthFacebookWhite from './icons/auth-facebook-white.vue';
+import IconAuthGoogle from './icons/auth-google.vue';
+import IconBcMast from './icons/bc-mast.vue';
+import IconBackground from './icons/background.vue';
+import IconBanner from './icons/banner.vue';
+import IconBannerCentered from './icons/banner-centered.vue';
+import IconBannerLeft from './icons/banner-left.vue';
+import IconBrush from './icons/brush.vue';
+import IconBusiness from './icons/business.vue';
+import IconBusinessCardFilled from './icons/business-card-filled.vue';
+import IconButton from './icons/button.vue';
+import IconButtonArrow from './icons/buttons/button-arrow.vue';
+import IconButtonArrowLeft from './icons/buttons/button-arrow-left.vue';
+import IconButtonArrowRight from './icons/buttons/button-arrow-right.vue';
+import IconButtonBrushstroke from './icons/buttons/button-brushstroke.vue';
+import IconButtonBrushstrokeLeft from './icons/buttons/button-brushstroke-left.vue';
+import IconButtonBrushstrokeRight from './icons/buttons/button-brushstroke-right.vue';
+import IconButtonDashedOval from './icons/buttons/button-dashed-oval.vue';
+import IconButtonDashedRectangle from './icons/buttons/button-dashed-rectangle.vue';
+import IconButtonDashedRounded from './icons/buttons/button-dashed-rounded.vue';
+import IconButtonDoublelineOval from './icons/buttons/button-doubleline-oval.vue';
+import IconButtonDoublelineRectangle from './icons/buttons/button-doubleline-rectangle.vue';
+import IconButtonDoublelineRounded from './icons/buttons/button-doubleline-rounded.vue';
+import IconButtonJustified from './icons/button-justified.vue';
+import IconButtonPaper from './icons/buttons/button-paper.vue';
+import IconButtonPaperTop from './icons/buttons/button-paper-top.vue';
+import IconButtonPaperBottom from './icons/buttons/button-paper-bottom.vue';
+import IconButtonSoftshadowOval from './icons/buttons/button-softshadow-oval.vue';
+import IconButtonSoftshadowRectangle from './icons/buttons/button-softshadow-rectangle.vue';
+import IconButtonSoftshadowRounded from './icons/buttons/button-softshadow-rounded.vue';
+import IconCalendar from './icons/calendar.vue';
+import IconCalloutError from './icons/callout-error.vue';
+import IconCalloutInfo from './icons/callout-info.vue';
+import IconCalloutSuccess from './icons/callout-success.vue';
+import IconCalloutWarning from './icons/callout-warning.vue';
+import IconCap from './icons/cap.vue';
+import IconCard from './icons/card.vue';
+import IconCartEmpty from './icons/cart-empty.vue';
+import IconCheck from './icons/check.vue';
+import IconCheckThin from './icons/check-thin.vue';
+import IconChevronDown from './icons/chevron-down.vue';
+import IconChevronLeft from './icons/chevron-left.vue';
+import IconChevronRight from './icons/chevron-right.vue';
+import IconChevronRightWide from './icons/chevron-right-wide.vue';
+import IconChevronUp from './icons/chevron-up.vue';
+import IconClose from './icons/close.vue';
+import IconCommunity from './icons/community.vue';
+import IconContent from './icons/content.vue';
+import IconColumn1 from './icons/column-1.vue';
+import IconColumn2 from './icons/column-2.vue';
+import IconColumn3 from './icons/column-3.vue';
+import IconColumn4 from './icons/column-4.vue';
+import IconCopy from './icons/copy.vue';
+import IconDelete from './icons/delete.vue';
+import IconDesigns from './icons/designs.vue';
+import IconDesktop from './icons/desktop.vue';
+import IconDivider from './icons/divider.vue';
+import IconDividerThin from './icons/divider-thin.vue';
+import IconDividerThick from './icons/divider-thick.vue';
+import IconDonate from './icons/donate.vue';
+import IconDownload from './icons/download.vue';
+import IconDuplicate from './icons/duplicate.vue';
+import IconEdit from './icons/edit.vue';
+import IconEditLine from './icons/edit-line.vue';
+import IconError from './icons/error.vue';
+import IconEllipsis from './icons/ellipsis.vue';
+import IconEnvelopeEmail from './icons/envelope-email.vue';
+import IconEyeCrossed from './icons/eye-crossed.vue';
+import IconFees from './icons/fees.vue';
+import IconFilter from './icons/filter.vue';
+import IconFilterCrazyDomains from './icons/crazy-domains/filter.vue';
+import IconFlag from './icons/flag.vue';
+import IconFolder from './icons/folder.vue';
+import IconForm from './icons/form.vue';
+import IconFullscreen from './icons/fullscreen.vue';
+import IconFullscreenExit from './icons/fullscreen-exit.vue';
+import IconGlobe from './icons/globe.vue';
+import IconGlobeCrazyDomains from './icons/crazy-domains/globe.vue';
+import IconHamburger from './icons/hamburger.vue';
+import IconHamburger1 from './icons/hamburger-1.vue';
+import IconHamburger2 from './icons/hamburger-2.vue';
+import IconHamburger3 from './icons/hamburger-3.vue';
+import IconHamburger4 from './icons/hamburger-4.vue';
+import IconHome from './icons/home.vue';
+import IconHomeCrazyDomains from './icons/crazy-domains/home.vue';
+import IconImagesGallery from './icons/images-gallery.vue';
+import IconImageGalleryGrid from './icons/image-gallery-grid.vue';
+import IconImageGalleryCarousel from './icons/image-gallery-carousel.vue';
+import IconImageGalleryMasonry from './icons/image-gallery-masonry.vue';
+import IconImages from './icons/images.vue';
+import IconInfo from './icons/info.vue';
+import IconJobs from './icons/jobs.vue';
+import IconDisplayStyleAbout1 from './icons/layout/display-style-about-1.vue';
+import IconDisplayStyleAbout2 from './icons/layout/display-style-about-2.vue';
+import IconDisplayStyleAbout3 from './icons/layout/display-style-about-3.vue';
+import IconDisplayStyleAbout4 from './icons/layout/display-style-about-4.vue';
+import IconDisplayStyleAbout5 from './icons/layout/display-style-about-5.vue';
+import IconDisplayStyleAbout6 from './icons/layout/display-style-about-6.vue';
+import IconDisplayStyleImages1 from './icons/layout/display-style-images-1.vue';
+import IconDisplayStyleImages2 from './icons/layout/display-style-images-2.vue';
+import IconDisplayStyleImages3 from './icons/layout/display-style-images-3.vue';
+import IconDisplayStyleImages4 from './icons/layout/display-style-images-4.vue';
+import IconDisplayStyleImages5 from './icons/layout/display-style-images-5.vue';
+import IconDisplayStyleImages6 from './icons/layout/display-style-images-6.vue';
+import IconDisplayStyleBanner1 from './icons/layout/display-style-banner-1.vue';
+import IconDisplayStyleBanner2 from './icons/layout/display-style-banner-2.vue';
+import IconDisplayStyleBanner3 from './icons/layout/display-style-banner-3.vue';
+import IconDisplayStyleBanner4 from './icons/layout/display-style-banner-4.vue';
+import IconDisplayStyleBanner5 from './icons/layout/display-style-banner-5.vue';
+import IconDisplayStyleBanner6 from './icons/layout/display-style-banner-6.vue';
+import IconDisplayStyleBanner7 from './icons/layout/display-style-banner-7.vue';
+import IconDisplayStyleBanner8 from './icons/layout/display-style-banner-8.vue';
+import IconDisplayStyleBanner9 from './icons/layout/display-style-banner-9.vue';
+import IconDisplayStyleContact1 from './icons/layout/display-style-contact-1.vue';
+import IconDisplayStyleContact2 from './icons/layout/display-style-contact-2.vue';
+import IconDisplayStyleContact4 from './icons/layout/display-style-contact-4.vue';
+import IconDisplayStyleContact5 from './icons/layout/display-style-contact-5.vue';
+import IconDisplayStyleContact6 from './icons/layout/display-style-contact-6.vue';
+
+import IconNavStyleTabDisplayStyle1 from './icons/layout/nav/tab/display-style-1.vue';
+import IconNavStyleTabDisplayStyle2 from './icons/layout/nav/tab/display-style-2.vue';
+import IconNavStyleHamburgerDisplayStyle1 from './icons/layout/nav/hamburger/display-style-1.vue';
+import IconNavStyleHamburgerDisplayStyle2 from './icons/layout/nav/hamburger/display-style-2.vue';
+import IconNavStyleHamburgerDisplayStyle3 from './icons/layout/nav/hamburger/display-style-3.vue';
+import IconNavStyleHamburgerDisplayStyle4 from './icons/layout/nav/hamburger/display-style-4.vue';
+
+import IconHeaderNavStyleTabDisplayStyleNoLogo1 from './icons/layout/header/tab-display-style-no-logo-1.vue';
+import IconHeaderNavStyleTabDisplayStyleNoLogo2 from './icons/layout/header/tab-display-style-no-logo-2.vue';
+import IconHeaderNavStyleTabDisplayStyleNoLogo3 from './icons/layout/header/tab-display-style-no-logo-3.vue';
+import IconHeaderNavStyleHamburgerDisplayStyleNoLogo1 from './icons/layout/header/hamburger-display-style-no-logo-1.vue';
+import IconHeaderNavStyleHamburgerDisplayStyleNoLogo2 from './icons/layout/header/hamburger-display-style-no-logo-2.vue';
+import IconHeaderNavStyleHamburgerDisplayStyleNoLogo3 from './icons/layout/header/hamburger-display-style-no-logo-3.vue';
+
+import IconHeaderDesktopNavStyleTabDisplayStyle1 from './icons/layout/header/desktop-tab-display-style-1.vue';
+import IconHeaderDesktopNavStyleTabDisplayStyle2 from './icons/layout/header/desktop-tab-display-style-2.vue';
+import IconHeaderDesktopNavStyleTabDisplayStyle3 from './icons/layout/header/desktop-tab-display-style-3.vue';
+import IconHeaderDesktopNavStyleTabDisplayStyle4 from './icons/layout/header/desktop-tab-display-style-4.vue';
+import IconHeaderDesktopNavStyleTabDisplayStyle5 from './icons/layout/header/desktop-tab-display-style-5.vue';
+import IconHeaderDesktopNavStyleTabDisplayStyle6 from './icons/layout/header/desktop-tab-display-style-6.vue';
+import IconHeaderMobileNavStyleTabDisplayStyle1 from './icons/layout/header/mobile-tab-display-style-1.vue';
+import IconHeaderMobileNavStyleTabDisplayStyle2 from './icons/layout/header/mobile-tab-display-style-2.vue';
+
+import IconHeaderDesktopNavStyleHamburgerDisplayStyle1 from './icons/layout/header/desktop-hamburger-display-style-1.vue';
+import IconHeaderDesktopNavStyleHamburgerDisplayStyle2 from './icons/layout/header/desktop-hamburger-display-style-2.vue';
+import IconHeaderMobileNavStyleHamburgerDisplayStyle1 from './icons/layout/header/mobile-hamburger-display-style-1.vue';
+import IconHeaderMobileNavStyleHamburgerDisplayStyle2 from './icons/layout/header/mobile-hamburger-display-style-2.vue';
+import IconHeaderMobileNavStyleHamburgerDisplayStyle3 from './icons/layout/header/mobile-hamburger-display-style-3.vue';
+import IconHeaderMobileNavStyleHamburgerDisplayStyle4 from './icons/layout/header/mobile-hamburger-display-style-4.vue';
+
+import IconFooterCentered from './icons/footer-centered.vue'; // TODO - @deprecate
+import IconFooterLeft from './icons/footer-left.vue'; // TODO - @deprecate
+import IconFooterDisplayStyle1 from './icons/layout/footer/display-style-1.vue';
+import IconFooterDisplayStyle2 from './icons/layout/footer/display-style-2.vue';
+
+import IconLetterheadFilled from './icons/letterhead-filled.vue';
+import IconLink from './icons/link.vue';
+import IconLocation from './icons/location.vue';
+import IconLock from './icons/lock.vue';
+import IconMacosCommand from './icons/mac-command.vue';
+import IconMap from './icons/map.vue';
+import IconMessage from './icons/message.vue';
+import IconMug from './icons/mug.vue';
+
+import IconFormMessage from './icons/form-message.vue';
+import IconContactMessage from './icons/contact-message.vue';
+import IconMinus from './icons/minus.vue';
+import IconMinusCircleLight from './icons/minus-circle-light.vue';
+import IconMobile from './icons/mobile.vue';
+import IconOther from './icons/other.vue';
+import IconPalette from './icons/palette.vue';
+import IconPageButtons from './icons/page-buttons.vue';
+import IconPageHamburger from './icons/page-hamburger.vue';
+import IconPageTabs from './icons/page-tabs.vue';
+import IconPages from './icons/pages.vue';
+import IconPause from './icons/pause.vue';
+import IconPayment from './icons/payment.vue';
+import IconPaymentsFeatured from './icons/payments-featured.vue';
+import IconPaymentsTextonly from './icons/payments-textonly.vue';
+import IconPaymentsThumbnail from './icons/payments-thumbnail.vue';
+import IconPhone from './icons/phone.vue';
+import IconPlus from './icons/plus.vue';
+import IconPlusCircle from './icons/plus-circle.vue';
+import IconPlusCircleLight from './icons/plus-circle-light.vue';
+import IconPoll from './icons/poll.vue';
+import IconPortfolio from './icons/portfolio.vue';
+import IconPreview from './icons/preview.vue';
+import IconPrinting from './icons/printing.vue';
+import IconProcessing from './icons/processing.vue';
+import IconQuestion from './icons/question.vue';
+import IconReload from './icons/reload.vue';
+import IconReorderable from './icons/reorderable.vue';
+import IconRequestPayment from './icons/request-payment.vue';
+import IconShop from './icons/shop.vue';
+import IconSearch from './icons/search.vue';
+import IconSecure from './icons/secure.vue';
+import IconServices from './icons/services.vue';
+import IconSettings from './icons/settings.vue';
+import IconShare from './icons/share.vue';
+import IconSms from './icons/sms.vue';
+import IconSocialFacebook from './icons/social-facebook.vue';
+import IconSocialFacebookColor from './icons/social-facebook-color.vue';
+import IconSocialFacebookCrazyDomains from './icons/crazy-domains/social-facebook.vue';
+import IconSocialGoogle from './icons/social-google.vue';
+import IconSocialGoogleCrazyDomains from './icons/crazy-domains/social-google.vue';
+import IconSocialInstagramColor from './icons/social-instagram-color.vue';
+import IconSocialInstagramCrazyDomains from './icons/crazy-domains/social-instagram.vue';
+import IconSocialLinkedinColor from './icons/social-linkedin-color.vue';
+import IconSocialTwitterColor from './icons/social-twitter-color.vue';
+import IconSocialTwitterCrazyDomains from './icons/crazy-domains/social-twitter.vue';
+import IconSocialYoutubeCrazyDomains from './icons/crazy-domains/social-youtube.vue';
+import IconStarFilled from './icons/star-filled.vue';
+import IconStarHollow from './icons/star-hollow.vue';
+import IconSticker from './icons/sticker.vue';
+import IconStyles from './icons/styles.vue';
+import IconSubmit from './icons/submit.vue';
+import IconTemplates from './icons/templates.vue';
+import IconTextImage from './icons/text-image.vue';
+import IconTextImageLeft from './icons/text-image-left.vue';
+import IconTextImageCenter from './icons/text-image-center.vue';
+import IconTextImageOnly from './icons/text-image-only.vue';
+import IconTextImageRight from './icons/text-image-right.vue';
+import IconQuote from './icons/quote.vue';
+import IconTestimonialCentered from './icons/testimonial-centered.vue';
+import IconTestimonialColumns from './icons/testimonial-columns.vue';
+import IconTestimonialBigImage from './icons/testimonial-big-image.vue';
+import IconTextImageJustified from './icons/text-image-justified.vue';
+import IconTime from './icons/time.vue';
+import IconTooltipBottom from './icons/tooltip-bottom.vue';
+import IconTooltipLeft from './icons/tooltip-left.vue';
+import IconTooltipRight from './icons/tooltip-right.vue';
+import IconTooltipTop from './icons/tooltip-top.vue';
+import IconUpgrade from './icons/upgrade.vue';
+import IconUpgradeAlt from './icons/upgrade-alt.vue';
+import IconUpload from './icons/upload.vue';
+import IconUploadArrow from './icons/upload-arrow.vue';
+import IconUserAccounts from './icons/user-accounts.vue';
+import IconUserHeadset from './icons/user-headset.vue';
+import IconWatchlistFilled from './icons/watchlist-filled.vue';
+import IconWatchlistHollow from './icons/watchlist-hollow.vue';
+import IconWatchlistHollowAlt from './icons/watchlist-hollow-alt.vue';
+import IconWebsite from './icons/website.vue';
+import IconWebsiteFilled from './icons/website-filled.vue';
+import IconWholesale from './icons/wholesale.vue';
+import IconZoom from './icons/zoom.vue';
+import IconZoomIn from './icons/zoom-in.vue';
+import IconZoomOut from './icons/zoom-out.vue';
+import IconGodaddy from './icons/godaddy/logo.vue';
+import IconSocialShare from './icons/social-share.vue';
+import IconIconStyleNoBg from './icons/icon-style-no-bg.vue';
+import IconIconStyleCircleBg from './icons/icon-style-circle-bg.vue';
+import IconIconStyleSquareBg from './icons/icon-style-square-bg.vue';
+import IconCrop from './icons/crop.vue';
+
+import IconReset from './icons/reset.vue';
+import IconUndo from './icons/undo.vue';
+import IconRedo from './icons/redo.vue';
+import IconFilters from './icons/filters.vue';
+import IconLayer from './icons/layer.vue';
+import IconLayerBringFront from './icons/layer-bring-front.vue';
+import IconLayerSendBack from './icons/layer-send-back.vue';
+import IconOpacity from './icons/opacity.vue';
+
+import IconBan from './icons/ban.vue';
+import IconShape from './icons/shape.vue';
+
+// Maker Icons
+import IconMakerAnimate from './icons/maker/animate.vue';
+import IconMakerCustomLandscape from './icons/maker/custom-landscape.vue';
+import IconMakerEmail from './icons/maker/email.vue';
+import IconMakerEmailSymbol from './icons/maker/email-symbol.vue';
+import IconMakerEtsy from './icons/maker/etsy.vue';
+import IconMakerFacebook from './icons/maker/facebook.vue';
+import IconMakerFavicon from './icons/maker/favicon.vue';
+import IconMakerFlyer from './icons/maker/flyer.vue';
+import IconMakerGiftCertificate from './icons/maker/gift-certificate.vue';
+import IconMakerGlobe from './icons/maker/globe.vue';
+import IconMakerImage from './icons/maker/image.vue';
+import IconMakerInstagram from './icons/maker/instagram.vue';
+import IconMakerInvitation from './icons/maker/invitation.vue';
+import IconMakerInvoice from './icons/maker/invoice.vue';
+import IconMakerLink from './icons/maker/link.vue';
+import IconMakerLinkedin from './icons/maker/linkedin.vue';
+import IconMakerMenu from './icons/maker/menu.vue';
+import IconMakerPhone from './icons/maker/phone.vue';
+import IconMakerPinterest from './icons/maker/pinterest.vue';
+import IconMakerPostcard from './icons/maker/postcard.vue';
+import IconMakerPoster from './icons/maker/poster.vue';
+import IconMakerProfile from './icons/maker/profile.vue';
+import IconMakerQrcode from './icons/maker/qrcode.vue';
+import IconMakerSnapchat from './icons/maker/snapchat.vue';
+import IconMakerSoundcloud from './icons/maker/soundcloud.vue';
+import IconMakerText from './icons/maker/text.vue';
+import IconMakerThankyouCard from './icons/maker/thankyou-card.vue';
+import IconMakerTiktok from './icons/maker/tiktok.vue';
+import IconMakerTShirt from './icons/maker/t-shirt.vue';
+import IconMakerTumblr from './icons/maker/tumblr.vue';
+import IconMakerTwitch from './icons/maker/twitch.vue';
+import IconMakerTwitter from './icons/maker/twitter.vue';
+import IconMakerUppercase from './icons/maker/uppercase.vue';
+import IconMakerVideo from './icons/maker/video.vue';
+import IconMakerWhatsapp from './icons/maker/whatsapp.vue';
+import IconMakerYoutube from './icons/maker/youtube.vue';
+import IconMakerZoom from './icons/maker/zoom.vue';
+import IconMakerAlignCenter from './icons/maker/align-center.vue';
+import IconMakerAlignJustify from './icons/maker/align-justify.vue';
+import IconMakerAlignLeft from './icons/maker/align-left.vue';
+import IconMakerAlignRight from './icons/maker/align-right.vue';
+import IconMakerItalic from './icons/maker/italic.vue';
+import IconMakerBold from './icons/maker/bold.vue';
+import IconMakerUnderline from './icons/maker/underline.vue';
+import IconMakerStrikethrough from './icons/maker/strikethrough.vue';
+import IconMakerSpacing from './icons/maker/spacing.vue';
+import IconMakerTextColor from './icons/maker/text-color.vue';
+import IconMakerTextBackgroundColor from './icons/maker/text-background-color.vue';
+import IconMakerPlay from './icons/maker/play.vue';
+import IconMakerPause from './icons/maker/pause.vue';
+import IconMakerEraser from './icons/maker/eraser.vue';
+
+// Maker layout tab icons
+import IconLayoutIbnTcn from './icons/layout/layout-icon-bottom-normal-text-center-normal.vue';
+import IconLayoutIbnTcs from './icons/layout/layout-icon-bottom-normal-text-center-small.vue';
+import IconLayoutIbsTcn from './icons/layout/layout-icon-bottom-small-text-center-normal.vue';
+import IconLayoutIcnCtc from './icons/layout/layout-icon-center-normal-curved-text-circle.vue';
+import IconLayoutIcnCtt from './icons/layout/layout-icon-center-normal-curved-text-top.vue';
+import IconLayoutIcnCtb from './icons/layout/layout-icon-center-normal-curved-text-bottom.vue';
+import IconLayoutItnTjn from './icons/layout/layout-icon-top-normal-text-justify-normal.vue';
+import IconLayoutIlnTjn from './icons/layout/layout-icon-left-normal-text-justify-normal.vue';
+import IconLayoutIrnTjn from './icons/layout/layout-icon-right-normal-text-justify-normal.vue';
+import IconLayoutIlnTcn from './icons/layout/layout-icon-left-normal-text-center-normal.vue';
+import IconLayoutIlnTln from './icons/layout/layout-icon-left-normal-text-left-normal.vue';
+import IconLayoutIlsTln from './icons/layout/layout-icon-left-small-text-left-normal.vue';
+import IconLayoutIrnTcn from './icons/layout/layout-icon-right-normal-text-center-normal.vue';
+import IconLayoutIrnTrn from './icons/layout/layout-icon-right-normal-text-right-normal.vue';
+import IconLayoutIrsTrn from './icons/layout/layout-icon-right-small-text-right-normal.vue';
+import IconLayoutItnTcn from './icons/layout/layout-icon-top-normal-text-center-normal.vue';
+import IconLayoutItnTcs from './icons/layout/layout-icon-top-normal-text-center-small.vue';
+import IconLayoutItsTcn from './icons/layout/layout-icon-top-small-text-center-normal.vue';
+
+import IconFlipHorizontal from './icons/flip-horizontal.vue';
+import IconFlipVertical from './icons/flip-vertical.vue';
+
+import IconVolume from './icons/volume.vue';
+import IconVolumeMuted from './icons/volume-muted.vue';
+
+export default {
+  components: {
+    IconAbout,
+    IconAddPage,
+    IconAi,
+    IconArrowDown,
+    IconArrowLeft,
+    IconArrowRight,
+    IconArrowUp,
+    IconArrowUpUnderline,
+    IconAttach,
+    IconAuthFacebook,
+    IconAuthFacebookWhite,
+    IconAuthGoogle,
+    IconBcMast,
+    IconBackground,
+    IconBanner,
+    IconBannerCentered,
+    IconBannerLeft,
+    IconBrush,
+    IconBusiness,
+    IconBusinessCardFilled,
+    IconButton,
+    IconButtonArrow,
+    IconButtonArrowLeft,
+    IconButtonArrowRight,
+    IconButtonBrushstroke,
+    IconButtonBrushstrokeLeft,
+    IconButtonBrushstrokeRight,
+    IconButtonDashedOval,
+    IconButtonDashedRectangle,
+    IconButtonDashedRounded,
+    IconButtonDoublelineOval,
+    IconButtonDoublelineRectangle,
+    IconButtonDoublelineRounded,
+    IconButtonJustified,
+    IconButtonPaper,
+    IconButtonPaperTop,
+    IconButtonPaperBottom,
+    IconButtonSoftshadowOval,
+    IconButtonSoftshadowRectangle,
+    IconButtonSoftshadowRounded,
+    IconCalendar,
+    IconCalloutError,
+    IconCalloutInfo,
+    IconCalloutSuccess,
+    IconCalloutWarning,
+    IconCap,
+    IconCard,
+    IconCartEmpty,
+    IconCheck,
+    IconCheckThin,
+    IconChevronDown,
+    IconChevronLeft,
+    IconChevronRight,
+    IconChevronRightWide,
+    IconChevronUp,
+    IconClose,
+    IconCommunity,
+    IconContent,
+    IconColumn1,
+    IconColumn2,
+    IconColumn3,
+    IconColumn4,
+    IconCopy,
+    IconDelete,
+    IconDesigns,
+    IconDesktop,
+    IconDivider,
+    IconDividerThick,
+    IconDividerThin,
+    IconDonate,
+    IconDownload,
+    IconDuplicate,
+    IconEdit,
+    IconEditLine,
+    IconEllipsis,
+    IconError,
+    IconEnvelopeEmail,
+    IconEyeCrossed,
+    IconFees,
+    IconFilter,
+    IconFilterCrazyDomains,
+    IconFlag,
+    IconFolder,
+    IconFullscreen,
+    IconFullscreenExit,
+    IconGlobe,
+    IconGlobeCrazyDomains,
+    IconGodaddy,
+    IconHamburger,
+    IconHamburger1,
+    IconHamburger2,
+    IconHamburger3,
+    IconHamburger4,
+
+    IconNavStyleTabDisplayStyle1,
+    IconNavStyleTabDisplayStyle2,
+    IconNavStyleHamburgerDisplayStyle1,
+    IconNavStyleHamburgerDisplayStyle2,
+    IconNavStyleHamburgerDisplayStyle3,
+    IconNavStyleHamburgerDisplayStyle4,
+
+    IconHeaderDesktopNavStyleTabDisplayStyle1,
+    IconHeaderDesktopNavStyleTabDisplayStyle2,
+    IconHeaderDesktopNavStyleTabDisplayStyle3,
+    IconHeaderDesktopNavStyleTabDisplayStyle4,
+    IconHeaderDesktopNavStyleTabDisplayStyle5,
+    IconHeaderDesktopNavStyleTabDisplayStyle6,
+    IconHeaderNavStyleTabDisplayStyleNoLogo1,
+    IconHeaderNavStyleTabDisplayStyleNoLogo2,
+    IconHeaderNavStyleTabDisplayStyleNoLogo3,
+    IconHeaderMobileNavStyleTabDisplayStyle1,
+    IconHeaderMobileNavStyleTabDisplayStyle2,
+
+    IconHeaderDesktopNavStyleHamburgerDisplayStyle1,
+    IconHeaderDesktopNavStyleHamburgerDisplayStyle2,
+    IconHeaderNavStyleHamburgerDisplayStyleNoLogo1,
+    IconHeaderNavStyleHamburgerDisplayStyleNoLogo2,
+    IconHeaderNavStyleHamburgerDisplayStyleNoLogo3,
+    IconHeaderMobileNavStyleHamburgerDisplayStyle1,
+    IconHeaderMobileNavStyleHamburgerDisplayStyle2,
+    IconHeaderMobileNavStyleHamburgerDisplayStyle3,
+    IconHeaderMobileNavStyleHamburgerDisplayStyle4,
+
+    IconFooterDisplayStyle1,
+    IconFooterDisplayStyle2,
+    IconFooterCentered,
+    IconFooterLeft,
+
+    IconHome,
+    IconHomeCrazyDomains,
+    IconIconStyleNoBg,
+    IconIconStyleCircleBg,
+    IconIconStyleSquareBg,
+    IconImagesGallery,
+    IconImageGalleryGrid,
+    IconImageGalleryCarousel,
+    IconImageGalleryMasonry,
+    IconImages,
+    IconInfo,
+    IconJobs,
+    IconDisplayStyleAbout1,
+    IconDisplayStyleAbout2,
+    IconDisplayStyleAbout3,
+    IconDisplayStyleAbout4,
+    IconDisplayStyleAbout5,
+    IconDisplayStyleAbout6,
+    IconDisplayStyleImages1,
+    IconDisplayStyleImages2,
+    IconDisplayStyleImages3,
+    IconDisplayStyleImages4,
+    IconDisplayStyleImages5,
+    IconDisplayStyleImages6,
+    IconDisplayStyleBanner1,
+    IconDisplayStyleBanner2,
+    IconDisplayStyleBanner3,
+    IconDisplayStyleBanner4,
+    IconDisplayStyleBanner5,
+    IconDisplayStyleBanner6,
+    IconDisplayStyleBanner7,
+    IconDisplayStyleBanner8,
+    IconDisplayStyleBanner9,
+    IconDisplayStyleContact1,
+    IconDisplayStyleContact2,
+    IconDisplayStyleContact4,
+    IconDisplayStyleContact5,
+    IconDisplayStyleContact6,
+    IconLetterheadFilled,
+    IconLink,
+    IconLocation,
+    IconLock,
+    IconMacosCommand,
+    IconMap,
+    IconMessage,
+    IconForm,
+    IconFormMessage,
+    IconContactMessage,
+    IconMinus,
+    IconMinusCircleLight,
+    IconMobile,
+    IconMug,
+    IconOther,
+    IconPages,
+    IconPause,
+    IconPageButtons,
+    IconPageHamburger,
+    IconPageTabs,
+    IconPalette,
+    IconPayment,
+    IconPaymentsFeatured,
+    IconPaymentsTextonly,
+    IconPaymentsThumbnail,
+    IconPhone,
+    IconPlus,
+    IconPlusCircle,
+    IconPlusCircleLight,
+    IconPoll,
+    IconPortfolio,
+    IconPreview,
+    IconPrinting,
+    IconProcessing,
+    IconQuestion,
+    IconQuote,
+    IconReload,
+    IconReorderable,
+    IconRequestPayment,
+    IconShop,
+    IconSearch,
+    IconSecure,
+    IconServices,
+    IconSettings,
+    IconShare,
+    IconSms,
+    IconSocialFacebook,
+    IconSocialFacebookColor,
+    IconSocialFacebookCrazyDomains,
+    IconSocialGoogle,
+    IconSocialGoogleCrazyDomains,
+    IconSocialInstagramColor,
+    IconSocialInstagramCrazyDomains,
+    IconSocialLinkedinColor,
+    IconSocialShare,
+    IconSocialTwitterColor,
+    IconSocialTwitterCrazyDomains,
+    IconSocialYoutubeCrazyDomains,
+    IconStarFilled,
+    IconStarHollow,
+    IconSticker,
+    IconStyles,
+    IconSubmit,
+    IconTemplates,
+    IconTextImage,
+    IconTextImageLeft,
+    IconTextImageCenter,
+    IconTextImageOnly,
+    IconTextImageRight,
+    IconTextImageJustified,
+    IconTestimonialCentered,
+    IconTestimonialColumns,
+    IconTestimonialBigImage,
+    IconTime,
+    IconTooltipBottom,
+    IconTooltipLeft,
+    IconTooltipRight,
+    IconTooltipTop,
+    IconUpgrade,
+    IconUpgradeAlt,
+    IconUpload,
+    IconUploadArrow,
+    IconUserAccounts,
+    IconUserHeadset,
+    IconWatchlistFilled,
+    IconWatchlistHollow,
+    IconWatchlistHollowAlt,
+    IconWebsite,
+    IconWebsiteFilled,
+    IconWholesale,
+    IconZoom,
+    IconZoomIn,
+    IconZoomOut,
+    IconReset,
+    IconUndo,
+    IconRedo,
+    IconFilters,
+    IconLayer,
+    IconLayerBringFront,
+    IconLayerSendBack,
+    IconOpacity,
+    IconBan,
+    IconShape,
+
+    // Maker icons
+    IconMakerAnimate,
+    IconMakerCustomLandscape,
+    IconMakerEmail,
+    IconMakerEmailSymbol,
+    IconMakerEtsy,
+    IconMakerFacebook,
+    IconMakerFavicon,
+    IconMakerFlyer,
+    IconMakerGiftCertificate,
+    IconMakerGlobe,
+    IconMakerImage,
+    IconMakerInstagram,
+    IconMakerInvitation,
+    IconMakerInvoice,
+    IconMakerLink,
+    IconMakerLinkedin,
+    IconMakerMenu,
+    IconMakerPhone,
+    IconMakerPinterest,
+    IconMakerPostcard,
+    IconMakerPoster,
+    IconMakerProfile,
+    IconMakerQrcode,
+    IconMakerSnapchat,
+    IconMakerSoundcloud,
+    IconMakerText,
+    IconMakerThankyouCard,
+    IconMakerTiktok,
+    IconMakerTShirt,
+    IconMakerTumblr,
+    IconMakerTwitch,
+    IconMakerTwitter,
+    IconMakerUppercase,
+    IconMakerVideo,
+    IconMakerWhatsapp,
+    IconMakerYoutube,
+    IconMakerZoom,
+    IconMakerAlignCenter,
+    IconMakerAlignJustify,
+    IconMakerAlignLeft,
+    IconMakerAlignRight,
+    IconMakerItalic,
+    IconMakerBold,
+    IconMakerUnderline,
+    IconMakerStrikethrough,
+    IconMakerSpacing,
+    IconMakerTextColor,
+    IconMakerTextBackgroundColor,
+    IconMakerPlay,
+    IconMakerPause,
+    IconMakerEraser,
+    IconCrop,
+
+    // Layout
+    IconLayoutIbnTcn,
+    IconLayoutIbnTcs,
+    IconLayoutIbsTcn,
+    IconLayoutIcnCtc,
+    IconLayoutIcnCtt,
+    IconLayoutIcnCtb,
+    IconLayoutItnTjn,
+    IconLayoutIlnTjn,
+    IconLayoutIrnTjn,
+    IconLayoutIlnTln,
+    IconLayoutIlnTcn,
+    IconLayoutIlsTln,
+    IconLayoutIrnTcn,
+    IconLayoutIrnTrn,
+    IconLayoutIrsTrn,
+    IconLayoutItnTcn,
+    IconLayoutItnTcs,
+    IconLayoutItsTcn,
+
+    IconFlipHorizontal,
+    IconFlipVertical,
+
+    IconVolume,
+    IconVolumeMuted,
+    IconArrowTopRight,
+    /* eslint-disable camelcase */
+    IconAspectRatio1_1,
+    IconAspectRatio2_3,
+    IconAspectRatio3_2,
+    IconAspectRatio3_4,
+    IconAspectRatio4_3,
+    IconAspectRatio9_16,
+    IconAspectRatio16_9,
+    /* eslint-enable camelcase */
+    IconAspectRatioCircle,
+    IconAspectRatioOriginal,
+  },
+  props: {
+    viewBox: {
+      type: String,
+      required: false,
+      default: '0 0 16 16',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    altText: {
+      type: String,
+      default: null,
+    },
+    color: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'sm',
+    },
+    classes: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      id: null,
+    };
+  },
+  computed: {
+    computedClass() {
+      const colorCss = this.color ? `tw-text-${this.color}` : '';
+      const css = `${colorCss} ${this.classes}`.trim();
+      return css || null;
+    },
+    title() {
+      return this.altText || `${this.titleCase(this.name)}`;
+    },
+    description() {
+      return `${this.title} Icon`;
+    },
+    iconName() {
+      if (this.name) {
+        return this.name.split(' ').join('-');
+      }
+
+      return this.name;
+    },
+  },
+  mounted() {
+    // eslint-disable-next-line no-underscore-dangle
+    this.id = this.$.uid;
+  },
+  methods: {
+    titleCase(word) {
+      return word.replace(/^[-]*(.)/, (_, c) => c.toUpperCase()).replace(/[-]+(.)/g, (_, c) => ` ${c.toUpperCase()}`);
+    },
+  },
+};
+</script>