Skip to content

Import Icons with color options #375

Description

@OAGr

Right now we put the icons directly in apps/web/src/components/icons/AgentIcons.tsx. This helps make them flexible to work with. They have fill="currentColor" which allows us to re-color them.

Here's a preview:

import { SVGProps } from "react";

type IconProps = SVGProps<SVGSVGElement>;

export const EaFallacyAuditorIcon = (props: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" {...props}>
    <path d="M21.58868,12.75757l-.0791-.05273c-.35742-.23926-.83008-.22168-1.16895.04297-.33984.26465-.47266.71777-.32812,1.12305.26367.74414.08887,1.51471-.14062,1.94928-.06348.12012-.12598.20801-.17969.26953-.07617-.36914-.11133-.99023-.13672-1.43756-.1123-1.97656-.2998-5.2843-3.62201-5.64661-.34473-.03613-.68652.10645-.89941.38184-.21289.27545-.26758.64166-.14453.96686.66504,1.75293-.01758,3.96686-.56445,5.01868-.23828-.62506-.40527-1.68658-.17676-2.40826.12988-.41211-.01953-.86041-.37012-1.11237-.35156-.25293-.82324-.25098-1.17285.00293-2.69531,1.96393-2.63281,4.25989-2.5957,5.58801-.03125,1.73151.62207,3.40833,1.79492,4.60266,1.25488,1.27838,3.00195,1.95416,5.05078,1.95416,2.03705,0,3.80072-.69928,5.10052-2.02252,1.31445-1.33984,2.07812-3.29987,2.04297-5.22278.00098-2.3985-1.62695-3.47858-2.41016-3.99713ZM20.52814,20.57611c-.92773.94434-2.16302,1.42383-3.67279,1.42383-1.5,0-2.75293-.46875-3.62402-1.35547-.79883-.81354-1.24414-1.96686-1.22168-3.21204-.01855-.67871-.03809-1.37012.21973-2.06836.14062.57031.35547,1.09863.63574,1.50977.4873.71484,1.05176.89648,1.44043.92291.72363.04297,1.19434-.58307,1.34863-.79108.73145-.9873,1.47852-2.91901,1.50684-4.90051.23145.60455.33008,1.47272.39746,2.66022.08301,1.461.19727,3.46204,1.97552,3.46204.71094,0,1.37305-.38281,1.86426-1.07819.22266-.31445.39648-.67383.52051-1.05762.05176.20117.08008.42676.08008.68066.02637,1.41705-.52344,2.83893-1.4707,3.80383Z"/>
    <path d="M3,20c-.55176,0-1-.44824-1-1V3c0-.55176.44824-1,1-1h14c.55176,0,1,.44824,1,1v4.50519c.86481.38464,1.51105.95099,2,1.60547V3c0-1.6543-1.3457-3-3-3H3C1.3457,0,0,1.3457,0,3v16c0,1.6543,1.3457,3,3,3h6.25958c-.38104-.62268-.68341-1.29437-.89294-2H3Z"/>
    <path d="M14.27887,7.453c.46539-.28131.99597-.4527,1.54901-.4527h.00006c.10431,0,.20917.00543.32251.01733.06708.00732.1236.0246.18903.03351-1.11584-2.38831-3.53442-4.05115-6.33948-4.05115-3.85938,0-7,3.14062-7,7,0,3.16565,2.1145,5.8443,5.00403,6.70618.01062-.57111.06891-1.26886.26874-2.03217-1.6062-.59601-2.82001-1.98779-3.16437-3.69586.49908-.0564.8916-.46387.8916-.97815,0-.51758-.39728-.9281-.90094-.98004.3938-1.97162,1.94928-3.52716,3.9209-3.9209.05194.50372.46246.90094.98004.90094.51422,0,.92169-.39246.97815-.89148,1.40106.28394,2.58832,1.15259,3.30072,2.34448Z"/>
    <path d="M11.75195,7.03125l-3.2002.82031c-.35547.09082-.63184.36914-.72168.72461l-.7998,3.17969c-.08594.34082.01367.70215.26172.95117.19043.18945.44629.29297.70801.29297.08105,0,.16211-.00977.24219-.03027l.8277-.20685c.51068-.85718,1.26074-1.72449,2.36035-2.5257.34985-.25409.74847-.4057,1.16357-.49084l.37592-1.50415c.08594-.3418-.01465-.70312-.26465-.95117-.25-.24902-.61328-.3457-.95312-.25977ZM10.37598,10.37598l-.99902.24902.24707-.9834.99902-.25586-.24707.99023Z"/>
  </svg>
);

export const FallacyVerificationIcon = (props: IconProps) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M17.5,11c-3.58398,0-6.5,2.91602-6.5,6.5s2.91602,6.5,6.5,6.5,6.5-2.91602,6.5-6.5-2.91602-6.5-6.5-6.5ZM17.5,22c-2.48145,0-4.5-2.01855-4.5-4.5s2.01855-4.5,4.5-4.5,4.5,2.01855,4.5,4.5-2.01855,4.5-4.5,4.5Z"/>
    <path d="M18.875,15.40918l-2.0166,2.25-1.13184-.82617c-.44922-.32568-1.07324-.22754-1.39746.21826-.32617.44629-.22754,1.07178.21777,1.39697l1.86328,1.35938c.17773.12939.38379.19238.58984.19238.27539,0,.54785-.11328.74512-.33252l2.62012-2.92334c.36816-.41113.33398-1.04346-.07812-1.41211-.40918-.36816-1.04102-.33398-1.41211.07715Z"/>
    <path d="M3,20c-.55127,0-1-.44873-1-1V3c0-.55127.44873-1,1-1h14c.55176,0,1,.44873,1,1v6.02533c.6911.04047,1.36255.15448,2,.35107V3c0-1.6543-1.3457-3-3-3H3C1.3457,0,0,1.3457,0,3v16c0,1.6543,1.3457,3,3,3h7.30212c-.38867-.61932-.70599-1.2876-.92572-2H3Z"/>
    <path d="M10.42828,12.79254c.79736-1.19385,1.88995-2.1712,3.1709-2.8363.13019-.30804.23242-.63025.30023-.96552.26459-1.30896.00293-2.64233-.73517-3.755-.73816-1.11224-1.86584-1.87042-3.17419-2.13507-1.30878-.26465-2.64154-.00342-3.75458.73529-1.11206.73822-1.87024,1.86603-2.13483,3.1745-.26459,1.30896-.00342,2.64233.73523,3.755.38153.57489.87042,1.05005,1.43127,1.41656l-2.19385,5.4436c-.20599.51215.0415,1.09509.55359,1.30164.12256.04932.24896.07275.37347.07275.39594,0,.77081-.23682.92804-.6264l2.20087-5.46118c.29382.05212.5882.08862.88104.08862.48199,0,.95868-.07092,1.41797-.2085ZM8.40594,10.94025c-.78503-.15869-1.46118-.61371-1.90442-1.28113-.44281-.66742-.59949-1.46716-.44086-2.25275.15869-.7851.61365-1.4613,1.28101-1.9046.49744-.33002,1.06866-.5014,1.65253-.5014.19916,0,.39978.02002.59998.06055.78497.15869,1.46112.61371,1.90436,1.28113.44281.66742.59949,1.46765.44135,2.25269-.15869.7851-.61365,1.4613-1.28149,1.9046-.66785.44287-1.46503.59955-2.25244.44092Z"/>
  </svg>
);

The downside is that this is really ugly. It would be much nicer if we could import all of them from a set of svg files that we could track.

I previously tried a React Icon library to help with this, but it didn't work with our build system.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions