[wip] feat: 어바웃 당근 react-monochrome-icon 패키지로 변경

about.daangn.com/package.json

@@ -25,6 +25,7 @@
     "websites-integration:deployment": "deployment-awaiter --workflow about_daangn_com-build.yml"
   },
   "dependencies": {
+    "@daangn/react-monochrome-icon": "^0.0.14",
     "@karrotmarket/gatsby-source-greenhouse-jobboard": "^0.10.1",
     "@karrotmarket/gatsby-theme-prismic": "workspace:^",
     "@karrotmarket/gatsby-theme-website-team": "workspace:^",

about.daangn.com/src/components/blog/SearchInput.tsx

@@ -1,6 +1,5 @@
-import SeedIcon from '@karrotmarket/gatsby-theme-seed-design/src/Icon';
+import { IconMagnifyingglassLine } from '@daangn/react-monochrome-icon';
 import { vars } from '@seed-design/design-token';
-import { navigate } from 'gatsby';
 import { styled } from 'gatsby-theme-stitches/src/config';
 import { rem } from 'polished';
 import * as React from 'react';
@@ -20,7 +19,7 @@ const SearchInput = ({ search, onSearchChange }: Props) => {
 
   return (
     <Container>
-      <Icon name="icon_search_regular" />
+      <Icon />
       <Input
         type="text"
         placeholder="블로그 검색"
@@ -51,9 +50,9 @@ const Container = styled('div', {
   },
 });
 
-const Icon = styled(SeedIcon, {
-  width: rem(24),
-  height: rem(24),
+const Icon = styled(IconMagnifyingglassLine, {
+  width: rem(22),
+  height: rem(22),
 
   ':focus-within > &': {
     color: vars.$scale.color.gray800,

about.daangn.com/src/components/blogPostPage/PostBodyQuote.tsx

@@ -4,8 +4,7 @@ import { styled } from 'gatsby-theme-stitches/src/config';
 import { rem } from 'polished';
 import React from 'react';
 
-import { ReactComponent as QuoteClose } from '../../assets/icon_quote_close.svg';
-import { ReactComponent as QuoteOpen } from '../../assets/icon_quote_open.svg';
+import { IconQuotationmark2LeftFill, IconQuotationmark2RightFill } from '@daangn/react-monochrome-icon';
 
 type PostBodyQuoteProps = {
   slice: GatsbyTypes.PostQuoteSection;
@@ -14,7 +13,7 @@ type PostBodyQuoteProps = {
 const PostBodyQuote: React.FC<PostBodyQuoteProps> = ({ slice }) => {
   return (
     <Container>
-      <QuoteOpen style={{ width: '18px' }} />
+      <IconQuotationmark2LeftFill size={18} />
       <PrismicRichText
         field={slice.primary.quote}
         components={{
@@ -24,7 +23,7 @@ const PostBodyQuote: React.FC<PostBodyQuoteProps> = ({ slice }) => {
           heading5: ({ children, key }) => <Heading5 key={key}>{children}</Heading5>,
         }}
       />
-      <QuoteClose style={{ width: '18px' }} />
+      <IconQuotationmark2RightFill size={18} />
     </Container>
   );
 };

about.daangn.com/src/components/blogPostPage/ShareButtons.tsx

@@ -1,8 +1,8 @@
-import SeedIcon from '@karrotmarket/gatsby-theme-seed-design/src/Icon';
 import { styled } from 'gatsby-theme-stitches/src/config';
 import { rem } from 'polished';
 import * as React from 'react';
 
+import { IconAndroidshareFill } from '@daangn/react-monochrome-icon';
 import { ReactComponent as FacebookIcon } from '../../assets/facebook.svg';
 import { ReactComponent as LinkedinIcon } from '../../assets/linkedin.svg';
 import { ReactComponent as TwitterIcon } from '../../assets/twitter.svg';
@@ -59,7 +59,7 @@ const ShareButtons: React.FC<ShareButtonsProps> = ({ onClickLinkShare }) => {
         <TwitterIcon />
       </Button>
       <Button onClick={onClickShare}>
-        <SeedIcon name="icon_ios_share_regular" size="100%" />
+        <IconAndroidshareFill size={rem(22)} />
       </Button>
     </ShareContainer>
   );

about.daangn.com/src/components/culture/CarouselSection.tsx

@@ -6,8 +6,7 @@ import React from 'react';
 import { Carousel } from 'react-responsive-carousel';
 import { SimpleReveal } from 'simple-reveal';
 
-import { ReactComponent as ArrowLineLeft } from '../../assets/arrow_line_left.svg';
-import { ReactComponent as ArrowLineRight } from '../../assets/arrow_line_right.svg';
+import { IconArrowLeftFill, IconArrowRightFill } from '@daangn/react-monochrome-icon';
 
 type ArrowProps = {
   clickHandler: () => void;
@@ -21,14 +20,14 @@ type CarouselProps = {
 const PrevArrow: React.FC<ArrowProps> = (clickHandler, hasPrev) =>
   hasPrev && (
     <PrevArrowWapper onClick={clickHandler}>
-      <ArrowLineLeft />
+      <IconArrowLeftFill size={16} />
     </PrevArrowWapper>
   );
 
 const NextArrow: React.FC<ArrowProps> = (clickHandler, hasNext) =>
   hasNext && (
     <NextArrowWapper onClick={clickHandler}>
-      <ArrowLineRight />
+      <IconArrowRightFill size={16} />
     </NextArrowWapper>
   );
 

about.daangn.com/src/templates/IrPage.tsx

@@ -1,5 +1,5 @@
 import { mapAbstractTypeWithDefault } from '@cometjs/graphql-utils';
-import SeedIcon from '@karrotmarket/gatsby-theme-seed-design/src/Icon';
+import { IconArrowLeftLine } from '@daangn/react-monochrome-icon';
 import PageTitle from '@karrotmarket/gatsby-theme-website-team/src/components/PageTitle';
 import { vars } from '@seed-design/design-token';
 import { type HeadProps, Link, type PageProps, graphql, navigate, withPrefix } from 'gatsby';
@@ -149,7 +149,7 @@ const IrPage: React.FC<IrPageProps> = ({ data: prismicData }) => {
           }
         }}
       >
-        <SeedIcon name="icon_backward_regular" size="100%" />
+        <IconArrowLeftLine size={rem(22)} />
       </PreviousLink>
       <Content>
         <ContentHeader>

yarn.lock

@@ -1710,6 +1710,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@daangn/react-monochrome-icon@npm:^0.0.14":
+  version: 0.0.14
+  resolution: "@daangn/react-monochrome-icon@npm:0.0.14::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40daangn%2Freact-monochrome-icon%2F0.0.14%2F3f3426bb4125879dfd5bb1c7863dcd0bf0770784"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  checksum: 10c0/8dddd9360a11332509597b842e530338fa2a5ec16757a15060c06ae40d8d907897db5b90aa24d0c91400fd96486a95dfda5048a01790647d9e4cb280f0085138
+  languageName: node
+  linkType: hard
+
 "@daangn/websites@workspace:.":
   version: 0.0.0-use.local
   resolution: "@daangn/websites@workspace:."
@@ -4888,6 +4898,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "about.daangn.com@workspace:about.daangn.com"
   dependencies:
+    "@daangn/react-monochrome-icon": "npm:^0.0.14"
     "@karrotmarket/gatsby-source-greenhouse-jobboard": "npm:^0.10.1"
     "@karrotmarket/gatsby-theme-prismic": "workspace:^"
     "@karrotmarket/gatsby-theme-website-team": "workspace:^"