mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 11:29:33 +08:00
docs: adds blog post for how to add a social icon (#221)
* docs: adds blog post for how to add a social icon * refactor: update the blog post --------- Co-authored-by: Sat Naing <satnaingdev@gmail.com>
This commit is contained in:
Simon Smale
@@ -0,0 +1,125 @@
|
|||||||
|
---
|
||||||
|
author: Simon Smale
|
||||||
|
pubDatetime: 2024-01-08T18:16:00.000Z
|
||||||
|
modDatetime:
|
||||||
|
title: How to add a new Social Icon to AstroPaper
|
||||||
|
featured: false
|
||||||
|
draft: false
|
||||||
|
tags:
|
||||||
|
- FAQ
|
||||||
|
description: How to add a new social icon to AstroPaper
|
||||||
|
---
|
||||||
|
|
||||||
|
Hot new platform? Niche corner of the internet? Or one specific to your area? This post will guide you through how to add a new social icon to the theme.
|
||||||
|
|
||||||
|
## Table of contents
|
||||||
|
|
||||||
|
## Merging back to the theme
|
||||||
|
|
||||||
|
The maintainer of the theme [Sat Naing](https://github.com/satnaing) has said that he intends to only
|
||||||
|
|
||||||
|
> keep the project supporting only a specific set of popular social icons.
|
||||||
|
|
||||||
|
So there is a chance that your icon will not be in the repo, but fear not, it is very easy to add your own!
|
||||||
|
|
||||||
|
## Getting things to match
|
||||||
|
|
||||||
|
The icon set used by the theme come from [Tabler](https://tabler.io/icons) and there are a quite a few brands on there.
|
||||||
|
|
||||||
|
## Adding your icon, by example
|
||||||
|
|
||||||
|
For this guide we are going to use the StackOverflow icon as our example.
|
||||||
|
|
||||||
|
### Find the icon
|
||||||
|
|
||||||
|
> In this case, we are going to use the `StackOverflow` as an example.
|
||||||
|
|
||||||
|
Searching on Tabler for 'StackOverflow' we get a single icon <https://tabler.io/icons/icon/brand-stackoverflow>, we are going to need the svg code, so save it for later.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon icon-tabler icon-tabler-brand-stackoverflow"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="none"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||||
|
<path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />
|
||||||
|
<path d="M8 16h8" />
|
||||||
|
<path d="M8.322 12.582l7.956 .836" />
|
||||||
|
<path d="M8.787 9.168l7.826 1.664" />
|
||||||
|
<path d="M10.096 5.764l7.608 2.472" />
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Clean up
|
||||||
|
|
||||||
|
We need to do some tidy up on what the theme provides us.
|
||||||
|
|
||||||
|
1. remove all classes other than `icon-tabler`
|
||||||
|
2. remove width & height
|
||||||
|
3. remove the viewBox
|
||||||
|
4. remove the stroke-width
|
||||||
|
5. remove the stroke
|
||||||
|
6. remove the fill
|
||||||
|
|
||||||
|
This should leave you with the following
|
||||||
|
|
||||||
|
```html
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-tabler
|
||||||
|
stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
<path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />
|
||||||
|
<path d="M8 16h8" />
|
||||||
|
<path d="M8.322 12.582l7.956 .836" />
|
||||||
|
<path d="M8.787 9.168l7.826 1.664" />
|
||||||
|
<path d="M10.096 5.764l7.608 2.472" />
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
|
||||||
|
Now we can add the clean svg code to the `src/assets/socialIcons.ts` file in `SocialIcons`.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const socialIcons = {
|
||||||
|
/* others */
|
||||||
|
StackOverflow: `<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="icon-tabler
|
||||||
|
stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
<path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />
|
||||||
|
<path d="M8 16h8" />
|
||||||
|
<path d="M8.322 12.582l7.956 .836" />
|
||||||
|
<path d="M8.787 9.168l7.826 1.664" />
|
||||||
|
<path d="M10.096 5.764l7.608 2.472" />
|
||||||
|
</svg>`,
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally we can configure it for our blog in `src/config.ts` under `SOCIALS`. Setting `active: true` to add it to the site.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export const SOCIALS: SocialObjects = [
|
||||||
|
/* others */
|
||||||
|
{
|
||||||
|
name: "StackOverflow",
|
||||||
|
href: "https://stackoverflow.com/search?q=astropaper",
|
||||||
|
linkTitle: `See what questions there are about ${SITE.title} on StackOverflow`,
|
||||||
|
active: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
> Ensure that `href` and `linkTitle` are updated for the corresponding link and label.
|
||||||
|
|
||||||
|
Full code for the above steps can be found in [this pull request](https://github.com/satnaing/astro-paper/pull/216/files)
|
||||||
Reference in New Issue
Block a user