Extras
Brand icons
List of common brands and social media icons.
Simple Icons are used to provide the SVG code for icons.
Available icons
resources/js/Components/ui/icons/index.ts
- Bitbucket
- Discord
- GitHub
- GitLab
- Slack
- Telegram
- TikTok
- X
- YouTube
How to use it?
import { Facebook, Instagram, LinkedIn } from "@/Components/ui/icons";
Or you can use the approach used in resources/js/Layouts/PageLayout.vue
:
import { Facebook, Instagram, LinkedIn } from "@/Components/ui/icons";
const socialLinks: NavLink[] = [
{
title: "Facebook",
url: "#facebook",
icon: Facebook,
},
{
title: "Instagram",
url: "#instagram",
icon: Instagram,
},
{
title: "LinkedIn",
url: "#linkedin",
icon: LinkedIn,
},
];
<Button
v-for="social in socialLinks"
as="a"
:href="social.url"
rel="noopener noreferrer nofollow"
target="_blank"
variant="ghost"
size="icon"
>
<component :is="social.icon" :title="social.title" />
</Button>
How to add new icon?
- Go to https://simpleicons.org/ and search for desired brand, for example vue.
- Download
SVG
file by clicking on download icon, or by clicking on search icon and then Download SVG - Create new file in
resources/js/Components/ui/icons/
folder namedBrandName.vue
(the best way is to duplicate one of the existing icons and just rename it) - Open your new icon component and update the
title
andpath d
attribute - Open
index.ts
file and export your new icon in same way as other icons - Import and use component as shown here