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

Fix Grommet Icons stroke not being provided by currentColor

Browse Source 
- Improve dark-mode placeholder text color
This commit is contained in:
Xevion
2023-02-17 10:52:42 -06:00
parent 074764153a
commit 55f3cd649f
3 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,7 +32,7 @@ const IconInternal: FunctionComponent<IconInternalProps> = ({label, children, on
const DisplayIconSingle: FunctionComponent<DisplayIconSingleProps> = ({setId, id}) => { 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));
const iconClass = "text-slate-700 dark:text-slate-200 group-hover:text-slate-900 group-hover:scale-125 transition-transform w-8 h-8"; const iconClass = "text-slate-700 stroke-slate-700 dark:text-slate-200 dark:stroke-slate-200 group-hover:text-slate-900 group-hover:scale-125 transition-transform w-8 h-8";
return <IconSet fallback={<IconInternal label="..."> return <IconSet fallback={<IconInternal label="...">
<BsQuestionCircle className={iconClass}/> <BsQuestionCircle className={iconClass}/>
@@ -42,7 +42,7 @@ const DisplayIconSingle: FunctionComponent<DisplayIconSingleProps> = ({setId, id
return <IconInternal label={id} onClick={() => { return <IconInternal label={id} onClick={() => {
void navigator.clipboard.writeText(`import {${id}} from "react-icons/${setId}";`) void navigator.clipboard.writeText(`import {${id}} from "react-icons/${setId}";`)
}}> }}>
<Icon className={iconClass}/> <Icon className={classNames(iconClass, setId === 'gr' ? 'forceStroke' : null)}/>
</IconInternal> </IconInternal>
}} }}

2
src/pages/index.tsx
View File

@@ -75,7 +75,7 @@ const Home: NextPage = () => {
<input <input
ref={searchRef} ref={searchRef}
autoFocus autoFocus
className="placeholder:text-zinc-400 dark:text-zinc-200 dark:placeholder:text-zinc-300 grow bg-transparent ring-0 outline-none text-xl" className="placeholder:text-zinc-400 dark:text-zinc-200 dark:placeholder:text-zinc-400 grow bg-transparent ring-0 outline-none text-xl"
placeholder="Search for an icon..." placeholder="Search for an icon..."
onChange={({target: {value}}) => setQuery(value)} onChange={({target: {value}}) => setQuery(value)}
value={query} value={query}

6
src/styles/globals.scss
View File

@@ -14,4 +14,10 @@ html {
code { code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace; Bitstream Vera Sans Mono, Courier New, monospace;
}
.forceStroke {
> path, g {
stroke: currentColor;
}
} }