IconViewer: Fix Filling Icons
This commit is contained in:
parent
7eb5602623
commit
819d43e059
4 changed files with 10 additions and 6 deletions
|
|
@ -46,11 +46,13 @@ function searchMatch(search: string, name: string, Icon: Icon, searchByFunction:
|
|||
}
|
||||
|
||||
function IconItem({ iconName, Icon }: { iconName: string; Icon: Icon; }) {
|
||||
const fill = iconName === "CircleShield" ? "var(--background-base-low)" : "var(--interactive-icon-default)";
|
||||
console.log(iconName);
|
||||
return (
|
||||
<div className="vc-icon-box">
|
||||
<Clickable onClick={() => openIconModal(iconName, Icon, IconsFinds[iconName])}>
|
||||
<div className="vc-icon-container">
|
||||
<Icon className="vc-icon-icon" size="lg" width={32} height={32} color="var(--interactive-icon-default)" />
|
||||
<Icon className="vc-icon-icon" size="lg" width={32} height={32} color="var(--interactive-icon-default)" fill={fill} />
|
||||
</div>
|
||||
</Clickable>
|
||||
<Heading className="vc-icon-title" tag="h3">{iconName}</Heading>
|
||||
|
|
|
|||
|
|
@ -229,6 +229,7 @@ function IconModal({ iconName, Icon, findPattern, onClose, transitionState }: {
|
|||
const colorData = cssColors[color];
|
||||
const colorKeys = useMemo(() => getCssColorKeys(), []);
|
||||
|
||||
const fill = iconName === "CircleShield" ? "var(--background-base-low)" : colorData?.css;
|
||||
const findCode = findPattern
|
||||
? `const ${iconName}Icon = findComponentByCode(${JSON.stringify(findPattern)})`
|
||||
: null;
|
||||
|
|
@ -270,13 +271,13 @@ function IconModal({ iconName, Icon, findPattern, onClose, transitionState }: {
|
|||
onContextMenu={openColorMenu}
|
||||
onWheel={onWheel}
|
||||
>
|
||||
<Icon className="vc-ic-icon-large" color={colorData?.css} />
|
||||
<Icon className="vc-ic-icon-large" color={colorData?.css} fill={fill} />
|
||||
</div>
|
||||
<Flex flexDirection="column" className="vc-ic-icon-info">
|
||||
<Flex className="vc-ic-icon-sizes">
|
||||
{iconSizes.map(size => (
|
||||
<TooltipContainer text={size} key={size}>
|
||||
<Icon size={size} color={colorData?.css} />
|
||||
<Icon size={size} color={colorData?.css} fill={fill} />
|
||||
</TooltipContainer>
|
||||
))}
|
||||
</Flex>
|
||||
|
|
|
|||
|
|
@ -132,7 +132,8 @@ export const IconsFinds: Record<string, string> = {
|
|||
Key: "23-.24ZM10 16a2",
|
||||
InBox: "3H5ZM4 5.5C4",
|
||||
BookmarkOutline: "0-1-1ZM7 2a3",
|
||||
Food: "7.58V8a1 1"
|
||||
Food: "7.58V8a1 1",
|
||||
CircleShield: "8 10.9999V17.9999C8"
|
||||
};
|
||||
|
||||
// 13l4.91-8.05a1.8
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.vc-icon-tab-search-bar-grid>div:first-child {
|
||||
.vc-icon-tab-search-bar-grid > div:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
@ -137,4 +137,4 @@
|
|||
.vc-ic-modal-title {
|
||||
user-select: none;
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue