+1

assets/icons/personPlus_filled_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H15a3 3 0 1 1 0-6c0-.824.332-1.571.87-2.113C14.739 12.32 13.435 12 12 12Zm6 2a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

+4

src/components/icons/Person.tsx

··· 15 15 export const PersonPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({ 16 16 path: 'M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM5.678 19c.71-2.909 3.092-5 6.322-5 .621 0 1.206.077 1.748.218a1 1 0 1 0 .504-1.936A8.931 8.931 0 0 0 12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H11a1 1 0 1 0 0-2H5.678ZM18 14a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z', 17 17 }) 18 18 + 19 19 + export const PersonPlus_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({ 20 20 + path: 'M7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H15a3 3 0 1 1 0-6c0-.824.332-1.571.87-2.113C14.739 12.32 13.435 12 12 12Zm6 2a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z', 21 21 + })

+1 -1

src/components/icons/common.ts

··· 1 1 import {StyleSheet, TextProps} from 'react-native' 2 2 - import type {SvgProps, PathProps} from 'react-native-svg' 2 2 + import type {PathProps, SvgProps} from 'react-native-svg' 3 3 4 4 import {tokens} from '#/alf' 5 5

-634

src/lib/icons.tsx

··· 2 2 import {StyleProp, TextStyle, ViewStyle} from 'react-native' 3 3 import Svg, {Ellipse, Line, Path, Rect} from 'react-native-svg' 4 4 5 5 - export function GridIcon({ 6 6 - style, 7 7 - solid, 8 8 - }: { 9 9 - style?: StyleProp<ViewStyle> 10 10 - solid?: boolean 11 11 - }) { 12 12 - const DIM = 4 13 13 - const ARC = 2 14 14 - return ( 15 15 - <Svg width="24" height="24" style={style}> 16 16 - <Path 17 17 - d={`M4,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`} 18 18 - strokeWidth={2} 19 19 - stroke="#000" 20 20 - fill={solid ? '#000' : undefined} 21 21 - /> 22 22 - <Path 23 23 - d={`M16,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`} 24 24 - strokeWidth={2} 25 25 - stroke="#000" 26 26 - fill={solid ? '#000' : undefined} 27 27 - /> 28 28 - <Path 29 29 - d={`M4,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`} 30 30 - strokeWidth={2} 31 31 - stroke="#000" 32 32 - fill={solid ? '#000' : undefined} 33 33 - /> 34 34 - <Path 35 35 - d={`M16,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`} 36 36 - strokeWidth={2} 37 37 - stroke="#000" 38 38 - fill={solid ? '#000' : undefined} 39 39 - /> 40 40 - </Svg> 41 41 - ) 42 42 - } 43 43 - export function GridIconSolid({style}: {style?: StyleProp<ViewStyle>}) { 44 44 - return <GridIcon style={style} solid /> 45 45 - } 46 46 - 47 47 - export function HomeIcon({ 48 48 - style, 49 49 - size, 50 50 - strokeWidth = 4, 51 51 - }: { 52 52 - style?: StyleProp<ViewStyle> 53 53 - size?: string | number 54 54 - strokeWidth?: number 55 55 - }) { 56 56 - return ( 57 57 - <Svg 58 58 - viewBox="0 0 48 48" 59 59 - width={size || 24} 60 60 - height={size || 24} 61 61 - stroke="currentColor" 62 62 - fill="none" 63 63 - style={style}> 64 64 - <Path 65 65 - strokeWidth={strokeWidth} 66 66 - d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z" 67 67 - /> 68 68 - </Svg> 69 69 - ) 70 70 - } 71 71 - 72 72 - export function HomeIconSolid({ 73 73 - style, 74 74 - size, 75 75 - strokeWidth = 4, 76 76 - }: { 77 77 - style?: StyleProp<ViewStyle> 78 78 - size?: string | number 79 79 - strokeWidth?: number 80 80 - }) { 81 81 - return ( 82 82 - <Svg 83 83 - viewBox="0 0 48 48" 84 84 - width={size || 24} 85 85 - height={size || 24} 86 86 - stroke="currentColor" 87 87 - style={style}> 88 88 - <Path 89 89 - fill="currentColor" 90 90 - strokeWidth={strokeWidth} 91 91 - d="m 23.951,2 c -0.32,0.011 -0.628,0.124 -0.879,0.322 L 8.859,13.52 C 7.055,14.941 6,17.114 6,19.41 V 38.5 C 6,39.864 7.136,41 8.5,41 h 8 c 1.364,0 2.5,-1.136 2.5,-2.5 v -12 C 19,26.205 19.205,26 19.5,26 h 9 c 0.295,0 0.5,0.205 0.5,0.5 v 12 c 0,1.364 1.136,2.5 2.5,2.5 h 8 C 40.864,41 42,39.864 42,38.5 V 19.41 c 0,-2.296 -1.055,-4.469 -2.859,-5.89 L 24.928,2.322 C 24.65,2.103 24.304,1.989 23.951,2 Z" 92 92 - /> 93 93 - </Svg> 94 94 - ) 95 95 - } 96 96 - 97 5 // Copyright (c) 2020 Refactoring UI Inc. 98 6 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 99 7 export function MagnifyingGlassIcon({ ··· 147 55 ) 148 56 } 149 57 150 150 - export function MagnifyingGlassIcon2Solid({ 151 151 - style, 152 152 - size, 153 153 - strokeWidth = 2, 154 154 - }: { 155 155 - style?: StyleProp<ViewStyle> 156 156 - size?: string | number 157 157 - strokeWidth?: number 158 158 - }) { 159 159 - return ( 160 160 - <Svg 161 161 - fill="none" 162 162 - viewBox="0 0 24 24" 163 163 - strokeWidth={strokeWidth} 164 164 - stroke="currentColor" 165 165 - width={size || 24} 166 166 - height={size || 24} 167 167 - style={style}> 168 168 - <Ellipse 169 169 - cx="12" 170 170 - cy="10.5" 171 171 - rx="6.5" 172 172 - ry="6.5" 173 173 - stroke="none" 174 174 - fill="currentColor" 175 175 - /> 176 176 - <Ellipse cx="12" cy="10.5" rx="9" ry="9" /> 177 177 - <Line x1="18.5" y1="17" x2="22" y2="20.5" strokeLinecap="round" /> 178 178 - </Svg> 179 179 - ) 180 180 - } 181 181 - 182 182 - // https://github.com/Remix-Design/RemixIcon/blob/master/License 183 183 - export function BellIcon({ 184 184 - style, 185 185 - size, 186 186 - strokeWidth = 1.5, 187 187 - }: { 188 188 - style?: StyleProp<ViewStyle> 189 189 - size?: string | number 190 190 - strokeWidth?: number 191 191 - }) { 192 192 - return ( 193 193 - <Svg 194 194 - fill="none" 195 195 - viewBox="0 0 24 24" 196 196 - width={size || 24} 197 197 - height={size || 24} 198 198 - strokeWidth={strokeWidth} 199 199 - stroke="currentColor" 200 200 - style={style}> 201 201 - <Path d="M 11.642 2 H 12.442 A 8.6 8.55 0 0 1 21.042 10.55 V 18.1 A 1 1 0 0 1 20.042 19.1 H 4.042 A 1 1 0 0 1 3.042 18.1 V 10.55 A 8.6 8.55 0 0 1 11.642 2 Z" /> 202 202 - <Line x1="9" y1="22" x2="15" y2="22" /> 203 203 - </Svg> 204 204 - ) 205 205 - } 206 206 - 207 207 - // https://github.com/Remix-Design/RemixIcon/blob/master/License 208 208 - export function BellIconSolid({ 209 209 - style, 210 210 - size, 211 211 - strokeWidth = 1.5, 212 212 - }: { 213 213 - style?: StyleProp<ViewStyle> 214 214 - size?: string | number 215 215 - strokeWidth?: number 216 216 - }) { 217 217 - return ( 218 218 - <Svg 219 219 - viewBox="0 0 24 24" 220 220 - width={size || 24} 221 221 - height={size || 24} 222 222 - strokeWidth={strokeWidth} 223 223 - stroke="currentColor" 224 224 - style={style}> 225 225 - <Path 226 226 - d="M 11.642 2 H 12.442 A 8.6 8.55 0 0 1 21.042 10.55 V 18.1 A 1 1 0 0 1 20.042 19.1 H 4.042 A 1 1 0 0 1 3.042 18.1 V 10.55 A 8.6 8.55 0 0 1 11.642 2 Z" 227 227 - fill="currentColor" 228 228 - /> 229 229 - <Line x1="9" y1="22" x2="15" y2="22" /> 230 230 - </Svg> 231 231 - ) 232 232 - } 233 233 - 234 58 export function CogIcon({ 235 59 style, 236 60 size, ··· 263 87 ) 264 88 } 265 89 266 266 - export function CogIconSolid({ 267 267 - style, 268 268 - size, 269 269 - strokeWidth = 1.5, 270 270 - }: { 271 271 - style?: StyleProp<ViewStyle> 272 272 - size?: string | number 273 273 - strokeWidth: number 274 274 - }) { 275 275 - return ( 276 276 - <Svg 277 277 - fill="none" 278 278 - viewBox="0 0 24 24" 279 279 - width={size || 32} 280 280 - height={size || 32} 281 281 - strokeWidth={strokeWidth} 282 282 - stroke="currentColor" 283 283 - style={style}> 284 284 - <Path 285 285 - strokeLinecap="round" 286 286 - strokeLinejoin="round" 287 287 - d="M 9.594 3.94 C 9.684 3.398 10.154 3 10.704 3 L 13.297 3 C 13.847 3 14.317 3.398 14.407 3.94 L 14.62 5.221 C 14.683 5.595 14.933 5.907 15.265 6.091 C 15.339 6.131 15.412 6.174 15.485 6.218 C 15.809 6.414 16.205 6.475 16.56 6.342 L 17.777 5.886 C 18.292 5.692 18.872 5.9 19.147 6.376 L 20.443 8.623 C 20.718 9.099 20.608 9.705 20.183 10.054 L 19.18 10.881 C 18.887 11.121 18.742 11.494 18.749 11.873 C 18.751 11.958 18.751 12.043 18.749 12.128 C 18.742 12.506 18.887 12.878 19.179 13.118 L 20.184 13.946 C 20.608 14.296 20.718 14.9 20.444 15.376 L 19.146 17.623 C 18.871 18.099 18.292 18.307 17.777 18.114 L 16.56 17.658 C 16.205 17.525 15.81 17.586 15.484 17.782 C 15.412 17.826 15.338 17.869 15.264 17.91 C 14.933 18.093 14.683 18.405 14.62 18.779 L 14.407 20.059 C 14.317 20.602 13.847 21 13.297 21 L 10.703 21 C 10.153 21 9.683 20.602 9.593 20.06 L 9.38 18.779 C 9.318 18.405 9.068 18.093 8.736 17.909 C 8.662 17.868 8.589 17.826 8.516 17.782 C 8.191 17.586 7.796 17.525 7.44 17.658 L 6.223 18.114 C 5.708 18.307 5.129 18.1 4.854 17.624 L 3.557 15.377 C 3.282 14.901 3.392 14.295 3.817 13.946 L 4.821 13.119 C 5.113 12.879 5.258 12.506 5.251 12.127 C 5.249 12.042 5.249 11.957 5.251 11.872 C 5.258 11.494 5.113 11.122 4.821 10.882 L 3.817 10.054 C 3.393 9.705 3.283 9.1 3.557 8.624 L 4.854 6.377 C 5.129 5.9 5.709 5.692 6.224 5.886 L 7.44 6.342 C 7.796 6.475 8.191 6.414 8.516 6.218 C 8.588 6.174 8.662 6.131 8.736 6.09 C 9.068 5.907 9.318 5.595 9.38 5.221 Z M 13.5 9.402 C 11.5 8.247 9 9.691 9 12 C 9 13.072 9.572 14.062 10.5 14.598 C 12.5 15.753 15 14.309 15 12 C 15 10.928 14.428 9.938 13.5 9.402 Z" 288 288 - fill="currentColor" 289 289 - /> 290 290 - </Svg> 291 291 - ) 292 292 - } 293 293 - 294 294 - // Copyright (c) 2020 Refactoring UI Inc. 295 295 - // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 296 296 - export function MoonIcon({ 297 297 - style, 298 298 - size, 299 299 - strokeWidth = 1.5, 300 300 - }: { 301 301 - style?: StyleProp<ViewStyle> 302 302 - size?: string | number 303 303 - strokeWidth?: number 304 304 - }) { 305 305 - return ( 306 306 - <Svg 307 307 - fill="none" 308 308 - viewBox="0 0 24 24" 309 309 - width={size || 32} 310 310 - height={size || 32} 311 311 - strokeWidth={strokeWidth} 312 312 - stroke="currentColor" 313 313 - style={style}> 314 314 - <Path 315 315 - strokeLinecap="round" 316 316 - strokeLinejoin="round" 317 317 - d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" 318 318 - /> 319 319 - </Svg> 320 320 - ) 321 321 - } 322 322 - 323 323 - // Copyright (c) 2020 Refactoring UI Inc. 324 324 - // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 325 325 - export function SunIcon({ 326 326 - style, 327 327 - size, 328 328 - strokeWidth = 1.5, 329 329 - }: { 330 330 - style?: StyleProp<ViewStyle> 331 331 - size?: string | number 332 332 - strokeWidth?: number 333 333 - }) { 334 334 - return ( 335 335 - <Svg 336 336 - fill="none" 337 337 - viewBox="0 0 24 24" 338 338 - width={size || 32} 339 339 - height={size || 32} 340 340 - strokeWidth={strokeWidth} 341 341 - stroke="currentColor" 342 342 - style={style}> 343 343 - <Path 344 344 - d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" 345 345 - strokeLinecap="round" 346 346 - strokeLinejoin="round" 347 347 - /> 348 348 - </Svg> 349 349 - ) 350 350 - } 351 351 - 352 352 - // Copyright (c) 2020 Refactoring UI Inc. 353 353 - // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 354 354 - export function UserIcon({ 355 355 - style, 356 356 - size, 357 357 - strokeWidth = 1.5, 358 358 - }: { 359 359 - style?: StyleProp<ViewStyle> 360 360 - size?: string | number 361 361 - strokeWidth?: number 362 362 - }) { 363 363 - return ( 364 364 - <Svg 365 365 - fill="none" 366 366 - viewBox="0 0 24 24" 367 367 - width={size || 32} 368 368 - height={size || 32} 369 369 - strokeWidth={strokeWidth} 370 370 - stroke="currentColor" 371 371 - style={style}> 372 372 - <Path 373 373 - strokeLinecap="round" 374 374 - strokeLinejoin="round" 375 375 - d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" 376 376 - /> 377 377 - </Svg> 378 378 - ) 379 379 - } 380 380 - 381 381 - export function UserIconSolid({ 382 382 - style, 383 383 - size, 384 384 - strokeWidth = 1.5, 385 385 - }: { 386 386 - style?: StyleProp<ViewStyle> 387 387 - size?: string | number 388 388 - strokeWidth?: number 389 389 - }) { 390 390 - return ( 391 391 - <Svg 392 392 - fill="none" 393 393 - viewBox="0 0 24 24" 394 394 - width={size || 32} 395 395 - height={size || 32} 396 396 - strokeWidth={strokeWidth} 397 397 - stroke="currentColor" 398 398 - style={style}> 399 399 - <Path 400 400 - strokeLinecap="round" 401 401 - strokeLinejoin="round" 402 402 - fill="currentColor" 403 403 - d="M 15 9.75 C 15 12.059 12.5 13.503 10.5 12.348 C 9.572 11.812 9 10.822 9 9.75 C 9 7.441 11.5 5.997 13.5 7.152 C 14.428 7.688 15 8.678 15 9.75 Z" 404 404 - /> 405 405 - <Path 406 406 - strokeLinecap="round" 407 407 - strokeLinejoin="round" 408 408 - fill="currentColor" 409 409 - d="M 17.982 18.725 C 16.565 16.849 14.35 15.748 12 15.75 C 9.65 15.748 7.435 16.849 6.018 18.725 M 17.981 18.725 C 16.335 20.193 14.206 21.003 12 21 C 9.794 21.003 7.664 20.193 6.018 18.725" 410 410 - /> 411 411 - <Path 412 412 - strokeLinecap="round" 413 413 - strokeLinejoin="round" 414 414 - d="M 17.981 18.725 C 23.158 14.12 21.409 5.639 14.833 3.458 C 8.257 1.277 1.786 7.033 3.185 13.818 C 3.576 15.716 4.57 17.437 6.018 18.725 M 17.981 18.725 C 16.335 20.193 14.206 21.003 12 21 C 9.794 21.003 7.664 20.193 6.018 18.725" 415 415 - /> 416 416 - </Svg> 417 417 - ) 418 418 - } 419 419 - 420 90 // Copyright (c) 2020 Refactoring UI Inc. 421 91 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 422 92 export function UserGroupIcon({ ··· 444 114 ) 445 115 } 446 116 447 447 - export function RepostIcon({ 448 448 - style, 449 449 - size = 24, 450 450 - strokeWidth = 1.5, 451 451 - }: { 452 452 - style?: StyleProp<TextStyle> 453 453 - size?: string | number 454 454 - strokeWidth: number 455 455 - }) { 456 456 - return ( 457 457 - <Svg viewBox="0 0 24 24" width={size} height={size} style={style}> 458 458 - <Path 459 459 - stroke="currentColor" 460 460 - strokeWidth={strokeWidth} 461 461 - strokeLinejoin="round" 462 462 - fill="none" 463 463 - d="M 14.437 18.081 L 5.475 18.095 C 4.7 18.095 4.072 17.467 4.072 16.692 L 4.082 6.65 L 1.22 10.854 M 4.082 6.65 L 7.006 10.854 M 9.859 6.65 L 18.625 6.654 C 19.4 6.654 20.028 7.282 20.028 8.057 L 20.031 18.081 L 17.167 13.646 M 20.031 18.081 L 22.866 13.646" 464 464 - /> 465 465 - </Svg> 466 466 - ) 467 467 - } 468 468 - 469 469 - // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. 470 470 - export function HeartIcon({ 471 471 - style, 472 472 - size = 24, 473 473 - strokeWidth = 1.5, 474 474 - }: { 475 475 - style?: StyleProp<TextStyle> 476 476 - size?: string | number 477 477 - strokeWidth: number 478 478 - }) { 479 479 - return ( 480 480 - <Svg viewBox="0 0 24 24" width={size} height={size} style={style}> 481 481 - <Path 482 482 - strokeWidth={strokeWidth} 483 483 - stroke="currentColor" 484 484 - fill="none" 485 485 - d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z" 486 486 - /> 487 487 - </Svg> 488 488 - ) 489 489 - } 490 490 - 491 491 - // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. 492 492 - export function HeartIconSolid({ 493 493 - style, 494 494 - size = 24, 495 495 - }: { 496 496 - style?: StyleProp<TextStyle> 497 497 - size?: string | number 498 498 - }) { 499 499 - return ( 500 500 - <Svg viewBox="0 0 24 24" width={size} height={size} style={style}> 501 501 - <Path 502 502 - fill="currentColor" 503 503 - stroke="currentColor" 504 504 - strokeWidth={1} 505 505 - d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z" 506 506 - /> 507 507 - </Svg> 508 508 - ) 509 509 - } 510 510 - 511 511 - export function UpIcon({ 512 512 - style, 513 513 - size, 514 514 - strokeWidth = 1.3, 515 515 - }: { 516 516 - style?: StyleProp<ViewStyle> 517 517 - size?: string | number 518 518 - strokeWidth: number 519 519 - }) { 520 520 - return ( 521 521 - <Svg 522 522 - viewBox="0 0 14 14" 523 523 - width={size || 24} 524 524 - height={size || 24} 525 525 - style={style}> 526 526 - <Path 527 527 - strokeWidth={strokeWidth} 528 528 - stroke="currentColor" 529 529 - strokeLinecap="round" 530 530 - strokeLinejoin="round" 531 531 - d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z" 532 532 - /> 533 533 - </Svg> 534 534 - ) 535 535 - } 536 536 - 537 537 - export function UpIconSolid({ 538 538 - style, 539 539 - size, 540 540 - }: { 541 541 - style?: StyleProp<ViewStyle> 542 542 - size?: string | number 543 543 - }) { 544 544 - return ( 545 545 - <Svg 546 546 - viewBox="0 0 14 14" 547 547 - width={size || 24} 548 548 - height={size || 24} 549 549 - style={style}> 550 550 - <Path 551 551 - strokeWidth={1.3} 552 552 - stroke="currentColor" 553 553 - fill="currentColor" 554 554 - strokeLinecap="round" 555 555 - strokeLinejoin="round" 556 556 - d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z" 557 557 - /> 558 558 - </Svg> 559 559 - ) 560 560 - } 561 561 - 562 562 - export function DownIcon({ 563 563 - style, 564 564 - size, 565 565 - }: { 566 566 - style?: StyleProp<ViewStyle> 567 567 - size?: string | number 568 568 - }) { 569 569 - return ( 570 570 - <Svg 571 571 - viewBox="0 0 14 14" 572 572 - width={size || 24} 573 573 - height={size || 24} 574 574 - style={style}> 575 575 - <Path 576 576 - strokeWidth={1.3} 577 577 - stroke="currentColor" 578 578 - strokeLinecap="round" 579 579 - strokeLinejoin="round" 580 580 - d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z" 581 581 - /> 582 582 - </Svg> 583 583 - ) 584 584 - } 585 585 - 586 586 - export function DownIconSolid({ 587 587 - style, 588 588 - size, 589 589 - }: { 590 590 - style?: StyleProp<ViewStyle> 591 591 - size?: string | number 592 592 - }) { 593 593 - return ( 594 594 - <Svg 595 595 - viewBox="0 0 14 14" 596 596 - width={size || 24} 597 597 - height={size || 24} 598 598 - style={style}> 599 599 - <Path 600 600 - strokeWidth={1.3} 601 601 - stroke="currentColor" 602 602 - fill="currentColor" 603 603 - strokeLinecap="round" 604 604 - strokeLinejoin="round" 605 605 - d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z" 606 606 - /> 607 607 - </Svg> 608 608 - ) 609 609 - } 610 610 - 611 611 - // Copyright (c) 2020 Refactoring UI Inc. 612 612 - // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 613 613 - export function CommentBottomArrow({ 614 614 - style, 615 615 - size, 616 616 - strokeWidth = 1.3, 617 617 - }: { 618 618 - style?: StyleProp<TextStyle> 619 619 - size?: string | number 620 620 - strokeWidth?: number 621 621 - }) { 622 622 - let color = 'currentColor' 623 623 - if ( 624 624 - style && 625 625 - typeof style === 'object' && 626 626 - 'color' in style && 627 627 - typeof style.color === 'string' 628 628 - ) { 629 629 - color = style.color 630 630 - } 631 631 - return ( 632 632 - <Svg 633 633 - fill="none" 634 634 - viewBox="0 0 24 24" 635 635 - strokeWidth={strokeWidth || 2.5} 636 636 - stroke={color} 637 637 - width={size || 24} 638 638 - height={size || 24} 639 639 - style={style}> 640 640 - <Path 641 641 - strokeLinecap="round" 642 642 - strokeLinejoin="round" 643 643 - d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" 644 644 - /> 645 645 - </Svg> 646 646 - ) 647 647 - } 648 648 - 649 117 export function SquareIcon({ 650 118 style, 651 119 size, ··· 715 183 ) 716 184 } 717 185 718 718 - export function ComposeIcon({ 719 719 - style, 720 720 - size, 721 721 - strokeWidth = 1.5, 722 722 - }: { 723 723 - style?: StyleProp<TextStyle> 724 724 - size?: string | number 725 725 - strokeWidth?: number 726 726 - }) { 727 727 - return ( 728 728 - <Svg 729 729 - fill="none" 730 730 - viewBox="0 0 24 24" 731 731 - strokeWidth={strokeWidth} 732 732 - stroke="currentColor" 733 733 - width={size || 24} 734 734 - height={size || 24} 735 735 - style={style}> 736 736 - <Path 737 737 - strokeLinecap="round" 738 738 - strokeLinejoin="round" 739 739 - d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" 740 740 - /> 741 741 - </Svg> 742 742 - ) 743 743 - } 744 744 - 745 186 export function ComposeIcon2({ 746 187 style, 747 188 size, ··· 778 219 x2="21" 779 220 y2="3" 780 221 strokeWidth={strokeWidth * 1.5} 781 781 - /> 782 782 - </Svg> 783 783 - ) 784 784 - } 785 785 - 786 786 - export function SquarePlusIcon({ 787 787 - style, 788 788 - size, 789 789 - strokeWidth = 1.5, 790 790 - }: { 791 791 - style?: StyleProp<TextStyle> 792 792 - size?: string | number 793 793 - strokeWidth?: number 794 794 - }) { 795 795 - return ( 796 796 - <Svg 797 797 - viewBox="0 0 24 24" 798 798 - strokeWidth={strokeWidth} 799 799 - stroke="currentColor" 800 800 - width={size || 24} 801 801 - height={size || 24} 802 802 - style={style}> 803 803 - <Line 804 804 - strokeLinecap="round" 805 805 - strokeLinejoin="round" 806 806 - x1="12" 807 807 - y1="5.5" 808 808 - x2="12" 809 809 - y2="18.5" 810 810 - strokeWidth={strokeWidth * 1.5} 811 811 - /> 812 812 - <Line 813 813 - strokeLinecap="round" 814 814 - strokeLinejoin="round" 815 815 - x1="5.5" 816 816 - y1="12" 817 817 - x2="18.5" 818 818 - y2="12" 819 819 - strokeWidth={strokeWidth * 1.5} 820 820 - /> 821 821 - <Rect 822 822 - strokeWidth={strokeWidth} 823 823 - x="4" 824 824 - y="4" 825 825 - width="16" 826 826 - height="16" 827 827 - rx="4" 828 828 - ry="4" 829 222 /> 830 223 </Svg> 831 224 ) ··· 947 340 </Svg> 948 341 ) 949 342 } 950 950 - 951 951 - export function ListIcon({ 952 952 - style, 953 953 - size, 954 954 - strokeWidth = 1.5, 955 955 - }: { 956 956 - style?: StyleProp<TextStyle> 957 957 - size?: string | number 958 958 - strokeWidth?: number 959 959 - }) { 960 960 - return ( 961 961 - <Svg 962 962 - fill="none" 963 963 - viewBox="0 0 24 24" 964 964 - strokeWidth={strokeWidth || 1.5} 965 965 - stroke="currentColor" 966 966 - width={size} 967 967 - height={size} 968 968 - style={style}> 969 969 - <Path 970 970 - strokeLinecap="round" 971 971 - strokeLinejoin="round" 972 972 - d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" 973 973 - /> 974 974 - </Svg> 975 975 - ) 976 976 - }

+9 -9

src/view/com/notifications/Feed.tsx

··· 8 8 import {msg} from '@lingui/macro' 9 9 import {useLingui} from '@lingui/react' 10 10 11 11 + import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' 11 12 import {usePalette} from '#/lib/hooks/usePalette' 13 13 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 12 14 import {cleanError} from '#/lib/strings/errors' 15 15 + import {s} from '#/lib/styles' 13 16 import {logger} from '#/logger' 14 17 import {useModerationOpts} from '#/state/preferences/moderation-opts' 15 18 import {useNotificationFeedQuery} from '#/state/queries/notifications/feed' 16 19 import {useUnreadNotificationsApi} from '#/state/queries/notifications/unread' 17 17 - import {s} from 'lib/styles' 18 18 - import {EmptyState} from '../util/EmptyState' 19 19 - import {ErrorMessage} from '../util/error/ErrorMessage' 20 20 - import {List, ListRef} from '../util/List' 21 21 - import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' 22 22 - import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' 23 23 - import {CenteredView} from '../util/Views' 20 20 + import {EmptyState} from '#/view/com/util/EmptyState' 21 21 + import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' 22 22 + import {List, ListRef} from '#/view/com/util/List' 23 23 + import {NotificationFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 24 24 + import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn' 25 25 + import {CenteredView} from '#/view/com/util/Views' 24 26 import {FeedItem} from './FeedItem' 25 27 import hairlineWidth = StyleSheet.hairlineWidth 26 26 - import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' 27 27 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 28 28 29 29 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} 30 30 const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}

+27 -38

src/view/com/notifications/FeedItem.tsx

··· 17 17 ModerationOpts, 18 18 } from '@atproto/api' 19 19 import {AtUri} from '@atproto/api' 20 20 - import { 21 21 - FontAwesomeIcon, 22 22 - FontAwesomeIconStyle, 23 23 - Props, 24 24 - } from '@fortawesome/react-native-fontawesome' 25 20 import {msg, plural, Trans} from '@lingui/macro' 26 21 import {useLingui} from '@lingui/react' 27 22 import {useQueryClient} from '@tanstack/react-query' ··· 29 24 import {FeedNotification} from '#/state/queries/notifications/feed' 30 25 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' 31 26 import {usePalette} from 'lib/hooks/usePalette' 32 32 - import {HeartIconSolid} from 'lib/icons' 33 27 import {makeProfileLink} from 'lib/routes/links' 34 28 import {sanitizeDisplayName} from 'lib/strings/display-names' 35 29 import {sanitizeHandle} from 'lib/strings/handles' ··· 37 31 import {colors, s} from 'lib/styles' 38 32 import {isWeb} from 'platform/detection' 39 33 import {precacheProfile} from 'state/queries/profile' 34 34 + import {atoms as a, useTheme} from '#/alf' 35 35 + import { 36 36 + ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon, 37 37 + ChevronTop_Stroke2_Corner0_Rounded as ChevronUpIcon, 38 38 + } from '#/components/icons/Chevron' 39 39 + import {Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled} from '#/components/icons/Heart2' 40 40 + import {PersonPlus_Filled_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person' 41 41 + import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost' 40 42 import {Link as NewLink} from '#/components/Link' 41 43 import {ProfileHoverCard} from '#/components/ProfileHoverCard' 42 44 import {FeedSourceCard} from '../feeds/FeedSourceCard' ··· 47 49 import {Text} from '../util/text/Text' 48 50 import {TimeElapsed} from '../util/TimeElapsed' 49 51 import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar' 52 52 + 50 53 import hairlineWidth = StyleSheet.hairlineWidth 51 54 52 55 const MAX_AUTHORS = 5 ··· 71 74 const queryClient = useQueryClient() 72 75 const pal = usePalette('default') 73 76 const {_} = useLingui() 77 77 + const t = useTheme() 74 78 const [isAuthorsExpanded, setAuthorsExpanded] = useState<boolean>(false) 75 79 const itemHref = useMemo(() => { 76 80 if (item.type === 'post-like' || item.type === 'repost') { ··· 150 154 } 151 155 152 156 let action = '' 153 153 - let icon: Props['icon'] | 'HeartIconSolid' 154 154 - let iconStyle: Props['style'] = [] 157 157 + let icon = ( 158 158 + <HeartIconFilled 159 159 + size="xl" 160 160 + style={[ 161 161 + s.likeColor, 162 162 + // {position: 'relative', top: -4} 163 163 + ]} 164 164 + /> 165 165 + ) 155 166 if (item.type === 'post-like') { 156 167 action = _(msg`liked your post`) 157 157 - icon = 'HeartIconSolid' 158 158 - iconStyle = [ 159 159 - s.likeColor as FontAwesomeIconStyle, 160 160 - {position: 'relative', top: -4}, 161 161 - ] 162 168 } else if (item.type === 'repost') { 163 169 action = _(msg`reposted your post`) 164 164 - icon = 'retweet' 165 165 - iconStyle = [s.green3 as FontAwesomeIconStyle] 170 170 + icon = <RepostIcon size="xl" style={{color: t.palette.positive_600}} /> 166 171 } else if (item.type === 'follow') { 167 172 action = _(msg`followed you`) 168 168 - icon = 'user-plus' 169 169 - iconStyle = [s.blue3 as FontAwesomeIconStyle] 173 173 + icon = <PersonPlusIcon size="xl" style={{color: t.palette.primary_500}} /> 170 174 } else if (item.type === 'feedgen-like') { 171 175 action = _(msg`liked your custom feed`) 172 172 - icon = 'HeartIconSolid' 173 173 - iconStyle = [ 174 174 - s.likeColor as FontAwesomeIconStyle, 175 175 - {position: 'relative', top: -4}, 176 176 - ] 177 176 } else { 178 177 return null 179 178 } ··· 200 199 item.type === 'repost' 201 200 } 202 201 onBeforePress={onBeforePress}> 203 203 - <View style={styles.layoutIcon}> 202 202 + <View style={[styles.layoutIcon, a.pr_sm]}> 204 203 {/* TODO: Prevent conditional rendering and move toward composable 205 204 notifications for clearer accessibility labeling */} 206 206 - {icon === 'HeartIconSolid' ? ( 207 207 - <HeartIconSolid size={28} style={[styles.icon, ...iconStyle]} /> 208 208 - ) : ( 209 209 - <FontAwesomeIcon 210 210 - icon={icon} 211 211 - size={24} 212 212 - style={[styles.icon, ...iconStyle]} 213 213 - /> 214 214 - )} 205 205 + {icon} 215 206 </View> 216 207 <View style={styles.layoutContent}> 217 208 <ExpandListPressable ··· 322 313 accessibilityHint={_( 323 314 msg`Collapses list of users for a given notification`, 324 315 )}> 325 325 - <FontAwesomeIcon 326 326 - icon="angle-up" 327 327 - size={18} 316 316 + <ChevronUpIcon 317 317 + size="md" 328 318 style={[styles.expandedAuthorsCloseBtnIcon, pal.text]} 329 319 /> 330 320 <Text type="sm-medium" style={pal.text}> ··· 369 359 +{authors.length - MAX_AUTHORS} 370 360 </Text> 371 361 ) : undefined} 372 372 - <FontAwesomeIcon 373 373 - icon="angle-down" 374 374 - size={18} 362 362 + <ChevronDownIcon 363 363 + size="md" 375 364 style={[styles.expandedAuthorsCloseBtnIcon, pal.textLight]} 376 365 /> 377 366 </View>

+10 -8

src/view/com/util/LoadingPlaceholder.tsx

··· 8 8 } from 'react-native' 9 9 10 10 import {usePalette} from 'lib/hooks/usePalette' 11 11 - import {HeartIconSolid} from 'lib/icons' 12 11 import {s} from 'lib/styles' 13 12 import {useTheme} from 'lib/ThemeContext' 14 14 - import {useTheme as useTheme_NEW} from '#/alf' 13 13 + import {atoms as a, useTheme as useTheme_NEW} from '#/alf' 15 14 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble' 16 16 - import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2' 15 15 + import { 16 16 + Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled, 17 17 + Heart2_Stroke2_Corner0_Rounded as HeartIconOutline, 18 18 + } from '#/components/icons/Heart2' 17 19 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost' 18 20 import hairlineWidth = StyleSheet.hairlineWidth 19 21 ··· 139 141 const pal = usePalette('default') 140 142 return ( 141 143 <View style={[styles.notification, pal.view, style]}> 142 142 - <View style={{paddingLeft: 30, paddingRight: 10}}> 143 143 - <HeartIconSolid 144 144 - style={{color: pal.colors.backgroundLight} as ViewStyle} 145 145 - size={30} 144 144 + <View style={[{width: 70}, a.align_end, a.pr_sm, a.pt_2xs]}> 145 145 + <HeartIconFilled 146 146 + size="xl" 147 147 + style={{color: pal.colors.backgroundLight}} 146 148 /> 147 149 </View> 148 150 <View style={{flex: 1}}> 149 149 - <View style={[s.flexRow, s.mb10]}> 151 151 + <View style={[a.flex_row, s.mb10]}> 150 152 <LoadingPlaceholder 151 153 width={30} 152 154 height={30}