Skip to content

Conversation

@clowreed
Copy link
Contributor

@clowreed clowreed commented Mar 28, 2025

Added the ff icons from Figma.

  • ArrowUp
  • EditColor
  • AiImage
  • AiLogo
  • Microphone
  • More
  • PencilFilled
  • Nav

image

@clowreed clowreed requested a review from glebovsky March 28, 2025 08:38
function ArrowUp ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 16 16' }) {
return (
<svg width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
<g clipPath="url(#clip0_130_15802)">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be stripped out. The icon should be pure vector.
In figma, use "Flatten" option on object group to convert it to vector lines.

function EditColor ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 16 16' }) {
return (
<svg width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
<g clipPath="url(#clip0_130_15846)">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here: flatten to vector

function AiImage ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 16 16' }) {
return (
<svg width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
<g clipPath="url(#clip0_ai_image)">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here: flatten to vector

function Microphone ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 16 16' }) {
return (
<svg width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
<g clipPath="url(#clip0_microphone)">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here: flatten to vector

)
}

function More ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 16 16' }) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would rename this to "ThreeDots" or "Kebab" or something else

)
}

function Nav ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 16 16' }) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have this icon already. It is called Style
image

@clowreed clowreed merged commit 1936325 into main Mar 28, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants