[Research] find source of the `fa-quote` icon

[possumbilities]

Description

The fa-quote icon is included in the Figma designs, however since it is likely created from a typeface generally it is possible it was not sourced from font awesome, but was instead made by a past CC contributor.

Further research is needed to ascertain whether it is included in font-awesome as an icon, or not. Since the majority of the icons utilized in the mockups are from font awesome, to lean toward the side of caution it was added to the fa-icons.svg file for the time being.

If it is found to not be officially a part of font-awesome we can move it to a more general cc-custom-icons.svg or similar file.

Resolution

• [X] I would be interested in resolving this bug.

[TimidRobot]

Current Icon

<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" width="100%">
<g id="fa-quote">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4781 15.1929C14.6213 13.6728 14.1309 11.9078 14.1309 10.0253C14.1309 6.43046 16.4667 1.59003 22.2362 0L23.2852 3.00339C20.5513 3.96935 18.7531 5.8889 18.5712 7.09094C19.1458 6.88957 19.7629 6.78016 20.4053 6.78016C23.4952 6.78016 26 9.31129 26 12.4336C26 15.5559 23.4952 18.0871 20.4053 18.0871C18.2971 18.0871 16.4613 16.9088 15.5075 15.1684L15.4781 15.1929Z" fill="black"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.34728 15.1929C0.490433 13.6728 2.76566e-05 11.9078 2.76566e-05 10.0253C2.76566e-05 6.43046 2.33581 1.59003 8.10535 0L9.15436 3.00339C6.42042 3.96935 4.62225 5.8889 4.44036 7.09094C5.01493 6.88957 5.63204 6.78016 6.27444 6.78016C9.36431 6.78016 11.8691 9.31129 11.8691 12.4336C11.8691 15.5559 9.36431 18.0871 6.27444 18.0871C4.16626 18.0871 2.33042 16.9088 1.37669 15.1684L1.34728 15.1929Z" fill="black"/>
</g>
</svg>

The string M15.4781 does not exist in any of our repositories except in this file (which has been added/copied to multiple repositories).

Quote Left Icon | Font Awesome

I recommend replacing with Quote Left Icon | Font Awesome so we have an icon with a known provenance.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"/></svg>

[possumbilities]

That string likely wouldn't show up because the original icon (or at least where I found it) is in the Figma file, and I manually exported it as an SVG from there with a custom viewbox so it may not be a 1:1 with other implementations if we were doing comparisons. That process would create the coordinates, and the shape but it might shift slightly depending on export settings and how the paths are defined in that process.

I think one source of finding this would be trying to ascertain: was it created within that Figma file or imported into it as a vectorized shape? Or was it derived from a typeface that was utilized within Figma and then converted to a vectorized shape?

There might be some clue to its origin within the history of Figma. A quote icon is usually derived from a typeface, and if we could find the typeface that has quotes in this shape we could find its provenance and document it.

---

My take on replacing it with the current Font Awesome quote icon is that Icons have an entire shape language relevant to designs, so I'd rather us find the source of the one we have, or instead make a new one that matches the shape language of what is done within Vocabulary overall, rather than defaulting to a Font Awesome variant because it needs to pair with the Typography its utilized within and I'm not confident the squared off round edge version from Font Awesome satisfies that pairing.

I'll keep looking into it, from a visual standpoint I'd almost prefer to make a new one from one of our typefaces rather than use the FA one just because of how much it varies from the rest of how we handle shapes in Vocabulary currently.

[possumbilities]

This renewed conversation made me take a moment to go back through the Figma history in a different way. I'm confident it is not from Font Awesome, all of their quote icons going back several versions use the squared off quote shape and this one does not match any of those even closely. There are many Font Awesome icons imported into the Figma file as assets, and stored as such, but this icon is not stored in that way and had it been imported from an external source the same way it should show up similarly.

After digging further into the history I found:

The quote icon appears to have been drawn in Figma from two ellipses that were then joined as a path union on July 13, 2020 at 3:30pm, by a CC Staffer. One of the ellipses was a copy of the other, and then its coordinate points altered slightly after having part of it removed. From there it was copied and pasted and reused multiple times in future versions of the mockups as they evolved.

Therefore, my recommendation is that we should move this Icon out of its location, rename it and put it within a custom sprite file.

[lightspeedana]

Hi, I'd love to quickly work on this. Just to clarify, are you suggesting a new cc-custom-icons.svg file is created in src/vocabulary/svg/cc/icons/, with this icon added to it under the name cc-quote - or for it to be added to the existing cc-icons.svg file in there?

With this clarified, I can change all the instances where this is defined across the repository in a PR.