Add personalized text icon

[talbshoam]

WHY are these changes introduced?

The email team is currently working on adding the magic-ui component in order to allow merchants to generate subject lines using the power of AI. Since the magic icon (green circle) is very similar to the current icon we use for personalized text (purple circle), we decided to create a new icon for personalized text.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[kyledurand]

Looking pretty good but I think the tests will fail because there's some stuff that can be removed from the markup. Let me know if you need a hand with it

[kyledurand]

I think this is still going to fail our icon checks.

The fill of #fff isn't allowed, only fills of #5C5F62 are allowed. I think the fill="none" can be removed.

width and height attrs should be removed

I don't think the clip path will pass either. Make sure the icon was exported as a flat icon without extra layers.

[nataliehercun]

hey @kyledurand !

Trying to make sure I export things correctely from figma. I removed the background fill, but not sure what I need to do to optimize for the following:

• width and height attrs should be removed
• I don't think the clip path will pass either. Make sure the icon was exported as a flat icon without extra layers.