feat(icons): add flag, repeat, tag and close glyphs
This commit is contained in:
@@ -15,7 +15,11 @@ export type IconName =
|
||||
| "projects"
|
||||
| "review"
|
||||
| "settings"
|
||||
| "flag"
|
||||
| "repeat"
|
||||
| "tag"
|
||||
| "plus"
|
||||
| "close"
|
||||
| "chevron";
|
||||
|
||||
type Props = {
|
||||
@@ -227,6 +231,64 @@ export default function Icon({ name, size = 22, color = C.textSecondary, bg = C.
|
||||
</View>
|
||||
);
|
||||
|
||||
case "flag":
|
||||
return (
|
||||
<View style={box}>
|
||||
{/* Pole plus a pennant — reads as a priority flag at 20px where a
|
||||
detailed banner outline would smear into a blob. */}
|
||||
<View style={{ position: "absolute", left: size * 0.26, top: size * 0.12, width: w, height: size * 0.76, borderRadius: 1, backgroundColor: color }} />
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: size * 0.26 + w,
|
||||
top: size * 0.14,
|
||||
width: size * 0.44,
|
||||
height: size * 0.34,
|
||||
borderTopRightRadius: 2,
|
||||
borderBottomRightRadius: 2,
|
||||
backgroundColor: color,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
||||
case "repeat":
|
||||
return (
|
||||
<View style={box}>
|
||||
{/* Two offset bars with opposing arrowheads: a loop, without the
|
||||
anti-aliasing mush a thin circular arc gets at this size. */}
|
||||
<View style={{ position: "absolute", left: size * 0.2, top: size * 0.3, width: size * 0.5, height: w, backgroundColor: color }} />
|
||||
<View style={{ position: "absolute", left: size * 0.62, top: size * 0.3 - size * 0.09 + w / 2, width: size * 0.18, height: size * 0.18, borderRightWidth: w, borderTopWidth: w, borderColor: color, transform: [{ rotate: "45deg" }] }} />
|
||||
<View style={{ position: "absolute", left: size * 0.3, top: size * 0.66, width: size * 0.5, height: w, backgroundColor: color }} />
|
||||
<View style={{ position: "absolute", left: size * 0.2, top: size * 0.66 - size * 0.09 + w / 2, width: size * 0.18, height: size * 0.18, borderLeftWidth: w, borderBottomWidth: w, borderColor: color, transform: [{ rotate: "45deg" }] }} />
|
||||
</View>
|
||||
);
|
||||
|
||||
case "tag":
|
||||
return (
|
||||
<View style={[box, s.center]}>
|
||||
<View
|
||||
style={{
|
||||
width: size * 0.6,
|
||||
height: size * 0.6,
|
||||
borderWidth: w,
|
||||
borderColor: color,
|
||||
borderRadius: 3,
|
||||
transform: [{ rotate: "45deg" }],
|
||||
}}
|
||||
/>
|
||||
<View style={{ position: "absolute", left: size * 0.3, top: size * 0.3, width: w + 0.6, height: w + 0.6, borderRadius: 999, backgroundColor: color }} />
|
||||
</View>
|
||||
);
|
||||
|
||||
case "close":
|
||||
return (
|
||||
<View style={[box, s.center]}>
|
||||
<View style={{ position: "absolute", width: size * 0.6, height: w, borderRadius: 2, backgroundColor: color, transform: [{ rotate: "45deg" }] }} />
|
||||
<View style={{ position: "absolute", width: size * 0.6, height: w, borderRadius: 2, backgroundColor: color, transform: [{ rotate: "-45deg" }] }} />
|
||||
</View>
|
||||
);
|
||||
|
||||
case "plus":
|
||||
return (
|
||||
<View style={[box, s.center]}>
|
||||
|
||||
Reference in New Issue
Block a user