mirror of
https://github.com/10h30/astroplate.git
synced 2026-06-05 15:08:00 +09:00
added dynamicIcon
This commit is contained in:
somrat sorkar
+9
-9
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "astroplate",
|
||||
"version": "1.2.4",
|
||||
"version": "1.3.0",
|
||||
"description": "Astro and Tailwindcss boilerplate",
|
||||
"author": "zeon.studio",
|
||||
"license": "MIT",
|
||||
@@ -13,13 +13,13 @@
|
||||
"remove-darkmode": "node scripts/removeDarkmode.js && yarn format"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/image": "^0.17.0",
|
||||
"@astrojs/image": "^0.17.1",
|
||||
"@astrojs/mdx": "^0.19.7",
|
||||
"@astrojs/react": "^2.2.1",
|
||||
"@astrojs/rss": "^2.4.3",
|
||||
"@astrojs/sitemap": "^1.3.3",
|
||||
"@astrojs/tailwind": "^3.1.3",
|
||||
"astro": "^2.6.4",
|
||||
"@astrojs/tailwind": "^4.0.0",
|
||||
"astro": "^2.7.0",
|
||||
"astro-auto-import": "^0.3.0",
|
||||
"date-fns": "^2.30.0",
|
||||
"date-fns-tz": "^2.0.0",
|
||||
@@ -33,7 +33,7 @@
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.9.0",
|
||||
"react-icons": "^4.10.1",
|
||||
"react-lite-youtube-embed": "^2.3.52",
|
||||
"remark-collapse": "^0.1.2",
|
||||
"remark-toc": "^8.0.1",
|
||||
@@ -44,16 +44,16 @@
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"@types/marked": "^5.0.0",
|
||||
"@types/node": "20.3.1",
|
||||
"@types/react": "18.2.12",
|
||||
"@types/react-dom": "18.2.5",
|
||||
"@types/node": "20.3.2",
|
||||
"@types/react": "18.2.14",
|
||||
"@types/react-dom": "18.2.6",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.43.0",
|
||||
"postcss": "^8.4.24",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-astro": "^0.10.0",
|
||||
"prettier-plugin-tailwindcss": "^0.3.0",
|
||||
"sass": "^1.63.4",
|
||||
"sass": "^1.63.6",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"tailwind-bootstrap-grid": "^5.0.1",
|
||||
"typescript": "5.1.3"
|
||||
|
||||
Regular → Executable
+22
-31
@@ -1,33 +1,24 @@
|
||||
{
|
||||
"facebook": "https://facebook.com/",
|
||||
"twitter": "https://twitter.com/",
|
||||
"mastodon": "https://mastodon.com/",
|
||||
"instagram": "https://instagram.com/",
|
||||
"youtube": "",
|
||||
"linkedin": "",
|
||||
"github": "",
|
||||
"gitlab": "",
|
||||
"discord": "",
|
||||
"slack": "",
|
||||
"medium": "",
|
||||
"codepen": "",
|
||||
"bitbucket": "",
|
||||
"dribbble": "",
|
||||
"behance": "",
|
||||
"pinterest": "",
|
||||
"soundcloud": "",
|
||||
"tumblr": "",
|
||||
"reddit": "",
|
||||
"vk": "",
|
||||
"whatsapp": "",
|
||||
"snapchat": "",
|
||||
"vimeo": "",
|
||||
"tiktok": "",
|
||||
"foursquare": "",
|
||||
"rss": "",
|
||||
"email": "",
|
||||
"phone": "",
|
||||
"address": "",
|
||||
"skype": "",
|
||||
"website": ""
|
||||
"main": [
|
||||
{
|
||||
"name": "facebook",
|
||||
"icon": "FaFacebook",
|
||||
"link": "https://www.facebook.com/"
|
||||
},
|
||||
{
|
||||
"name": "twitter",
|
||||
"icon": "FaTwitter",
|
||||
"link": "https://twitter.com/"
|
||||
},
|
||||
{
|
||||
"name": "github",
|
||||
"icon": "FaGithub",
|
||||
"link": "https://www.github.com/"
|
||||
},
|
||||
{
|
||||
"name": "linkedin",
|
||||
"icon": "FaLinkedin",
|
||||
"link": "https://www.linkedin.com/"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -4,9 +4,17 @@ email: johndoe@email.com
|
||||
image: "/images/avatar.png"
|
||||
description: this is meta description
|
||||
social:
|
||||
facebook: https://www.facebook.com/
|
||||
twitter: https://www.twitter.com/
|
||||
instagram: https://www.instagram.com/
|
||||
- name: github
|
||||
icon: FaGithub
|
||||
link: https://github.com
|
||||
|
||||
- name: twitter
|
||||
icon: FaTwitter
|
||||
link: https://twitter.com
|
||||
|
||||
- name: linkedin
|
||||
icon: FaLinkedin
|
||||
link: https://linkedin.com
|
||||
---
|
||||
|
||||
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr navigation et dolore magna aliqua.
|
||||
|
||||
@@ -4,9 +4,17 @@ email: samwilson@email.com
|
||||
image: "/images/avatar.png"
|
||||
description: this is meta description
|
||||
social:
|
||||
facebook: https://www.facebook.com/
|
||||
twitter: https://www.twitter.com/
|
||||
instagram: https://www.instagram.com/
|
||||
- name: github
|
||||
icon: FaGithub
|
||||
link: https://github.com
|
||||
|
||||
- name: twitter
|
||||
icon: FaTwitter
|
||||
link: https://twitter.com
|
||||
|
||||
- name: linkedin
|
||||
icon: FaLinkedin
|
||||
link: https://linkedin.com
|
||||
---
|
||||
|
||||
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr navigation et dolore magna aliqua.
|
||||
|
||||
@@ -4,9 +4,17 @@ email: williamjacob@email.com
|
||||
image: "/images/avatar.png"
|
||||
description: this is meta description
|
||||
social:
|
||||
facebook: https://www.facebook.com/
|
||||
twitter: https://www.twitter.com/
|
||||
instagram: https://www.instagram.com/
|
||||
- name: github
|
||||
icon: FaGithub
|
||||
link: https://github.com
|
||||
|
||||
- name: twitter
|
||||
icon: FaTwitter
|
||||
link: https://twitter.com
|
||||
|
||||
- name: linkedin
|
||||
icon: FaLinkedin
|
||||
link: https://linkedin.com
|
||||
---
|
||||
|
||||
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr navigation et dolore magna aliqua.
|
||||
|
||||
@@ -24,11 +24,15 @@ const authorsCollection = defineCollection({
|
||||
image: z.string().optional(),
|
||||
description: z.string().optional(),
|
||||
social: z
|
||||
.object({
|
||||
facebook: z.string().optional(),
|
||||
twitter: z.string().optional(),
|
||||
instagram: z.string().optional(),
|
||||
})
|
||||
.array(
|
||||
z
|
||||
.object({
|
||||
name: z.string().optional(),
|
||||
icon: z.string().optional(),
|
||||
link: z.string().optional(),
|
||||
})
|
||||
.optional()
|
||||
)
|
||||
.optional(),
|
||||
draft: z.boolean().optional(),
|
||||
}),
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import BlogCard from "@/components/BlogCard.astro";
|
||||
import Share from "@/components/Share.astro";
|
||||
import config from "@/config/config.json";
|
||||
import Disqus from "@/function-components/Disqus";
|
||||
import Disqus from "@/helpers/Disqus";
|
||||
import { getSinglePage } from "@/lib/contentParser.astro";
|
||||
import dateFormat from "@/lib/utils/dateFormat";
|
||||
import similerItems from "@/lib/utils/similarItems";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import { Image } from "@astrojs/image/components";
|
||||
import { plainify } from "@/lib/utils/textConverter";
|
||||
import { Image } from "@astrojs/image/components";
|
||||
import Social from "./Social.astro";
|
||||
|
||||
const { data } = Astro.props;
|
||||
|
||||
@@ -1,531 +1,28 @@
|
||||
---
|
||||
const { source, className } = Astro.props;
|
||||
import DynamicIcon from "@/helpers/DynamicIcon";
|
||||
|
||||
import {
|
||||
IoCall,
|
||||
IoGlobeOutline,
|
||||
IoLocation,
|
||||
IoLogoBehance,
|
||||
IoLogoBitbucket,
|
||||
IoLogoCodepen,
|
||||
IoLogoDiscord,
|
||||
IoLogoDribbble,
|
||||
IoLogoFacebook,
|
||||
IoLogoFoursquare,
|
||||
IoLogoGithub,
|
||||
IoLogoGitlab,
|
||||
IoLogoInstagram,
|
||||
IoLogoLinkedin,
|
||||
IoLogoMastodon,
|
||||
IoLogoMedium,
|
||||
IoLogoPinterest,
|
||||
IoLogoReddit,
|
||||
IoLogoRss,
|
||||
IoLogoSkype,
|
||||
IoLogoSlack,
|
||||
IoLogoSnapchat,
|
||||
IoLogoSoundcloud,
|
||||
IoLogoTiktok,
|
||||
IoLogoTumblr,
|
||||
IoLogoTwitter,
|
||||
IoLogoVimeo,
|
||||
IoLogoVk,
|
||||
IoLogoWhatsapp,
|
||||
IoLogoYoutube,
|
||||
IoMail,
|
||||
} from "react-icons/io5/index.js";
|
||||
|
||||
type SocialLink = {
|
||||
facebook: string;
|
||||
twitter: string;
|
||||
mastodon: string;
|
||||
instagram: string;
|
||||
youtube: string;
|
||||
linkedin: string;
|
||||
github: string;
|
||||
gitlab: string;
|
||||
discord: string;
|
||||
slack: string;
|
||||
medium: string;
|
||||
codepen: string;
|
||||
bitbucket: string;
|
||||
dribbble: string;
|
||||
behance: string;
|
||||
pinterest: string;
|
||||
soundcloud: string;
|
||||
tumblr: string;
|
||||
reddit: string;
|
||||
vk: string;
|
||||
whatsapp: string;
|
||||
snapchat: string;
|
||||
vimeo: string;
|
||||
tiktok: string;
|
||||
foursquare: string;
|
||||
rss: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
address: string;
|
||||
skype: string;
|
||||
website: string;
|
||||
};
|
||||
const {
|
||||
facebook,
|
||||
twitter,
|
||||
mastodon,
|
||||
instagram,
|
||||
youtube,
|
||||
linkedin,
|
||||
github,
|
||||
gitlab,
|
||||
discord,
|
||||
slack,
|
||||
medium,
|
||||
codepen,
|
||||
bitbucket,
|
||||
dribbble,
|
||||
behance,
|
||||
pinterest,
|
||||
soundcloud,
|
||||
tumblr,
|
||||
reddit,
|
||||
vk,
|
||||
whatsapp,
|
||||
snapchat,
|
||||
vimeo,
|
||||
tiktok,
|
||||
foursquare,
|
||||
rss,
|
||||
email,
|
||||
phone,
|
||||
address,
|
||||
skype,
|
||||
website,
|
||||
}: SocialLink = source;
|
||||
export interface ISocial {
|
||||
name: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
}
|
||||
---
|
||||
|
||||
<ul class={className}>
|
||||
{
|
||||
facebook && (
|
||||
<li class="inline-block">
|
||||
source.map((social: ISocial) => (
|
||||
<li>
|
||||
<a
|
||||
aria-label="facebook"
|
||||
href={facebook}
|
||||
aria-label={social.name}
|
||||
href={social.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoFacebook />
|
||||
<span class="sr-only">{social.name}</span>
|
||||
<DynamicIcon class="inline-block" icon={social.icon} />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
twitter && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="twitter"
|
||||
href={twitter}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoTwitter />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
mastodon && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="mastodon"
|
||||
href={mastodon}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoMastodon />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
instagram && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="instagram"
|
||||
href={instagram}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoInstagram />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
youtube && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="youtube"
|
||||
href={youtube}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoYoutube />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
linkedin && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="linkedin"
|
||||
href={linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoLinkedin />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
github && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="github"
|
||||
href={github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoGithub />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
gitlab && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="gitlab"
|
||||
href={gitlab}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoGitlab />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
discord && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="discord"
|
||||
href={discord}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoDiscord />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
slack && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="slack"
|
||||
href={slack}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoSlack />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
medium && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="medium"
|
||||
href={medium}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoMedium />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
codepen && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="codepen"
|
||||
href={codepen}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoCodepen />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
bitbucket && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="bitbucket"
|
||||
href={bitbucket}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoBitbucket />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
dribbble && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="dribbble"
|
||||
href={dribbble}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoDribbble />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
behance && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="behance"
|
||||
href={behance}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoBehance />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
pinterest && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="pinterest"
|
||||
href={pinterest}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoPinterest />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
soundcloud && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="soundcloud"
|
||||
href={soundcloud}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoSoundcloud />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
tumblr && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="tumblr"
|
||||
href={tumblr}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoTumblr />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
reddit && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="reddit"
|
||||
href={reddit}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoReddit />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
vk && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="vk"
|
||||
href={vk}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoVk />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
whatsapp && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="whatsapp"
|
||||
href={whatsapp}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoWhatsapp />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
snapchat && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="snapchat"
|
||||
href={snapchat}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoSnapchat />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
vimeo && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="vimeo"
|
||||
href={vimeo}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoVimeo />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
tiktok && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="tiktok"
|
||||
href={tiktok}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoTiktok />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
foursquare && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="foursquare"
|
||||
href={foursquare}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoFoursquare />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
skype && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="skype"
|
||||
href={skype}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoSkype />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
website && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="website"
|
||||
href={website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoGlobeOutline />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
rss && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="rss feed"
|
||||
href={rss}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLogoRss />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
email && (
|
||||
<li class="inline-block">
|
||||
<a aria-label="email" href={`mailto:${email}`}>
|
||||
<IoMail />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
phone && (
|
||||
<li class="inline-block">
|
||||
<a aria-label="telephone" href={`tel:${phone}`}>
|
||||
<IoCall />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
address && (
|
||||
<li class="inline-block">
|
||||
<a
|
||||
aria-label="location"
|
||||
href={address}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<IoLocation />
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
Executable
+49
@@ -0,0 +1,49 @@
|
||||
import React, { FC } from "react";
|
||||
import type { IconType } from "react-icons";
|
||||
import * as AiIcons from "react-icons/ai/index.js";
|
||||
import * as BsIcons from "react-icons/bs/index.js";
|
||||
import * as FaIcons from "react-icons/fa/index.js";
|
||||
import * as FaIcons6 from "react-icons/fa6/index.js";
|
||||
import * as FiIcons from "react-icons/fi/index.js";
|
||||
import * as Io5Icons from "react-icons/io5/index.js";
|
||||
import * as RiIcons from "react-icons/ri/index.js";
|
||||
import * as TbIcons from "react-icons/tb/index.js";
|
||||
import * as TfiIcons from "react-icons/tfi/index.js";
|
||||
|
||||
type IconMap = Record<string, IconType>;
|
||||
|
||||
interface IDynamicIcon {
|
||||
icon: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const iconLibraries: { [key: string]: IconMap } = {
|
||||
ai: AiIcons,
|
||||
bs: BsIcons,
|
||||
fa: FaIcons,
|
||||
fa6: FaIcons6,
|
||||
fi: FiIcons,
|
||||
io5: Io5Icons,
|
||||
ri: RiIcons,
|
||||
tb: TbIcons,
|
||||
tfi: TfiIcons,
|
||||
};
|
||||
|
||||
const DynamicIcon: FC<IDynamicIcon> = ({ icon, ...props }) => {
|
||||
const IconLibrary = getIconLibrary(icon);
|
||||
const Icon = IconLibrary ? IconLibrary[icon] : undefined;
|
||||
|
||||
if (!Icon) {
|
||||
return <span className="text-sm">Icon not found</span>;
|
||||
}
|
||||
|
||||
return <Icon {...props} />;
|
||||
};
|
||||
|
||||
const getIconLibrary = (icon: string): IconMap | undefined => {
|
||||
const libraryKey = icon.substring(0, 2).toLowerCase();
|
||||
|
||||
return iconLibraries[libraryKey];
|
||||
};
|
||||
|
||||
export default DynamicIcon;
|
||||
@@ -27,7 +27,7 @@ const { footer }: { footer: { name: string; url: string }[] } = menu;
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-8 text-center lg:col-3 lg:mb-0 lg:mt-0 lg:text-right">
|
||||
<Social source={social} className="social-icons" />
|
||||
<Social source={social.main} className="social-icons" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+1
-2
@@ -8,14 +8,13 @@
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"incremental": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"paths": {
|
||||
"@/function-components/*": ["./src/layouts/function-components/*"],
|
||||
"@/components/*": ["./src/layouts/components/*"],
|
||||
"@/shortcodes/*": ["./src/layouts/shortcodes/*"],
|
||||
"@/helpers/*": ["./src/layouts/helpers/*"],
|
||||
"@/partials/*": ["./src/layouts/partials/*"],
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user