xevion/icons
1
0
Fork 0
mirror of https://github.com/Xevion/icons.git synced 2025-12-09 14:07:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

Click icons to copy import text to clipboard

Browse Source
This commit is contained in:
Xevion
2023-02-17 02:07:53 -06:00
parent 50be4bf849
commit f6bcca0421
2 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/render/DisplayIconSingle.tsx
View File

@@ -4,6 +4,7 @@ import {getIcons} from "@utils/getIcons";
import type {IconType} from "react-icons"; import type {IconType} from "react-icons";
import {BiError} from "react-icons/bi"; import {BiError} from "react-icons/bi";
import {BsQuestionCircle} from "react-icons/bs"; import {BsQuestionCircle} from "react-icons/bs";
import {classNames} from "@utils/helpers";
type DisplayIconSingleProps = { type DisplayIconSingleProps = {
id: string; id: string;
@@ -13,14 +14,16 @@ type DisplayIconSingleProps = {
type IconInternalProps = { type IconInternalProps = {
children?: ReactNode; children?: ReactNode;
label: ReactNode; label: ReactNode;
onClick?: () => void;
}; };
const IconInternal: FunctionComponent<IconInternalProps> = ({label, children}) => { const IconInternal: FunctionComponent<IconInternalProps> = ({label, children, onClick}) => {
return <div return <div
className="w-32 flex flex-col items-center overflow-clip hover:overflow-visible hover:z-40"> className={classNames(onClick != undefined ? "cursor-pointer" : null, "group w-32 flex flex-col items-center overflow-clip group-hover:overflow-visible group-hover:z-40")}
{children ?? <BsQuestionCircle className="w-8 h-8" />} onClick={onClick}>
{children ?? <BsQuestionCircle className="w-8 h-8"/>}
<span <span
className="px-1 hover:bg-zinc-100 mt-1 text-[10px] hover:rounded hover:font-semibold"> className="px-1 mt-1 text-[10px]">
{label} {label}
</span> </span>
</div> </div>
@@ -30,11 +33,13 @@ const DisplayIconSingle: FunctionComponent<DisplayIconSingleProps> = ({setId, id
// eslint-disable-next-line // eslint-disable-next-line
const IconSet = loadable.lib(() => getIcons(setId)); const IconSet = loadable.lib(() => getIcons(setId));
return <IconSet fallback={<IconInternal label={"Loading..."} />} > return <IconSet fallback={<IconInternal label="..."/>}>
{(module) => { {(module) => {
const Icon: IconType | undefined = (module as { [icon: string]: IconType })[id] ?? BiError; const Icon: IconType | undefined = (module as { [icon: string]: IconType })[id] ?? BiError;
return <IconInternal label={id}> return <IconInternal label={id} onClick={() => {
<Icon className="text-slate-700 hover:text-slate-900 hover:scale-125 transition-transform w-8 h-8"/> void navigator.clipboard.writeText(`import {${id}} from "react-icons/${setId}";`)
}}>
<Icon className="text-slate-700 group-hover:text-slate-900 group-hover:scale-125 transition-transform w-8 h-8"/>
</IconInternal> </IconInternal>
}} }}

3
src/utils/helpers.ts Normal file
View File

@@ -0,0 +1,3 @@
export function classNames(...classes: (string | undefined | null)[]): string {
return classes.filter(Boolean).join(" ");
}