mirror of
https://github.com/pheralb/svgl.git
synced 2025-02-06 15:17:58 +08:00
commit
33640372e0
15
README.md
15
README.md
@ -93,6 +93,21 @@ yarn install
|
||||
},
|
||||
```
|
||||
|
||||
or to support a different logo for light and dark themes:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 45248,
|
||||
"title": "Title",
|
||||
"category": "Category",
|
||||
"route": {
|
||||
"light": "/library/your_logo_light.svg",
|
||||
"dark": "/library/your_logo_dark.svg"
|
||||
},
|
||||
"url": "Website"
|
||||
},
|
||||
```
|
||||
|
||||
And create a pull request with your logo 🚀.
|
||||
|
||||
## ✌️ Contributing
|
||||
|
@ -41,7 +41,16 @@
|
||||
|
||||
<CardSpotlight>
|
||||
<div class="flex flex-col items-center justify-center rounded-md p-4">
|
||||
<img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
|
||||
<img
|
||||
class="hidden dark:block mb-4 mt-2 h-10"
|
||||
src={typeof svgInfo.route !== 'string' ? svgInfo.route.dark : svgInfo.route}
|
||||
alt={svgInfo.title}
|
||||
/>
|
||||
<img
|
||||
class="block dark:hidden mb-4 mt-2 h-10"
|
||||
src={typeof svgInfo.route !== 'string' ? svgInfo.route.light : svgInfo.route}
|
||||
alt={svgInfo.title}
|
||||
/>
|
||||
<div class="mb-3 flex flex-col items-center justify-center">
|
||||
<p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
|
||||
<a
|
||||
@ -53,7 +62,26 @@
|
||||
<button
|
||||
title="Copy to clipboard"
|
||||
on:click={() => {
|
||||
copyToClipboard(svgInfo.route);
|
||||
const svgHasTheme = typeof svgInfo.route !== 'string';
|
||||
|
||||
if (!svgHasTheme) {
|
||||
copyToClipboard(
|
||||
typeof svgInfo.route === 'string'
|
||||
? svgInfo.route
|
||||
: "Something went wrong. Couldn't copy the SVG."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const dark = document.documentElement.classList.contains('dark');
|
||||
|
||||
copyToClipboard(
|
||||
typeof svgInfo.route !== 'string'
|
||||
? dark
|
||||
? svgInfo.route.dark
|
||||
: svgInfo.route.light
|
||||
: svgInfo.route
|
||||
);
|
||||
}}
|
||||
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
@ -62,7 +90,26 @@
|
||||
<button
|
||||
title="Download"
|
||||
on:click={() => {
|
||||
downloadSvg(svgInfo.route);
|
||||
const svgHasTheme = typeof svgInfo.route !== 'string';
|
||||
|
||||
if (!svgHasTheme) {
|
||||
downloadSvg(
|
||||
typeof svgInfo.route === 'string'
|
||||
? svgInfo.route
|
||||
: "Something went wrong. Couldn't copy the SVG."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const dark = document.documentElement.classList.contains('dark');
|
||||
|
||||
downloadSvg(
|
||||
typeof svgInfo.route !== 'string'
|
||||
? dark
|
||||
? svgInfo.route.dark
|
||||
: svgInfo.route.light
|
||||
: svgInfo.route
|
||||
);
|
||||
}}
|
||||
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
|
@ -1783,7 +1783,10 @@ export const svgs: iSVG[] = [
|
||||
id: 775133760594,
|
||||
title: 'Axiom',
|
||||
category: 'Software',
|
||||
route: '/library/axiom.svg',
|
||||
route: {
|
||||
dark: '/library/axiom-dark.svg',
|
||||
light: '/library/axiom-light.svg'
|
||||
},
|
||||
url: 'https://axiom.co/'
|
||||
},
|
||||
{
|
||||
|
@ -4,6 +4,11 @@ export interface iSVG {
|
||||
id: number;
|
||||
title: string;
|
||||
category: tCategory;
|
||||
route: string;
|
||||
route:
|
||||
| string // for backwards compat of when theme support was not added
|
||||
| {
|
||||
dark: string;
|
||||
light: string;
|
||||
};
|
||||
url: string;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 945 B After Width: | Height: | Size: 945 B |
1
static/library/axiom-light.svg
Normal file
1
static/library/axiom-light.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="358" height="309" fill="none"><g clip-path="url(#a)"><path fill="#000" d="M354.75 215.609 278.412 87.8475c-3.501-5.872-12.127-10.6761-19.17-10.6761h-47.659c-11.077 0-15.618-7.5477-10.093-16.7723l26.136-43.6269c2.074-3.4623 2.069-7.72483-.011-11.1835C225.534 2.13003 221.691 0 217.533 0h-66.485c-7.044 0-15.688 4.79349-19.212 10.6524L2.6449 225.448c-3.524953 5.859-3.526307 15.447-.00541 21.307L35.8815 302.08c5.5392 9.217 14.6223 9.228 20.1846.023l25.9742-42.98c5.5636-9.205 14.6452-9.195 20.1847.023l23.548 39.192c3.521 5.86 12.164 10.654 19.207 10.654h153.633c7.04 0 15.685-4.794 19.206-10.654l36.892-61.397c3.521-5.86 3.538-15.459.039-21.332Zm-103.096-6.149c5.505 9.236.945 16.794-10.132 16.794H122.021c-11.077 0-15.609-7.542-10.07-16.76l59.796-99.517c5.539-9.218 14.602-9.217 20.141.001l59.766 99.482Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h358v309H0z"/></clipPath></defs></svg>
|
After Width: | Height: | Size: 945 B |
Loading…
x
Reference in New Issue
Block a user