fix(icons): add table-of-contents icon

[karsa-mistmere]

closes #1859 (up for debate)

What is the purpose of this pull request?

• New Icon

Description

Adds a ToC icon.

Icon use case

• Document Navigation: An icon for a table of contents can be used in digital documents and eBooks to allow users to quickly navigate to different sections.
• Websites and Blogs: Use the icon on websites and blogs to help visitors jump to specific parts of long articles or pages.
• PDF Viewers: Integrate the icon into PDF viewers to offer a quick overview of the document's structure and enable easy access to different chapters.
• Content Management Systems (CMS): Use the icon in CMS interfaces to assist users in organizing and accessing various content sections.
• Educational Platforms: Implement the icon in educational resources to help students and educators navigate through course materials and syllabi.
• Software Documentation: Include the icon in software documentation to allow developers and users to quickly find relevant sections.
• Mobile Applications: Use the icon in mobile apps to provide a clear and intuitive way for users to navigate lengthy content.
• Project Management Tools: Utilize the icon in project management software to help users quickly locate different parts of project plans and documentation.
• Books and Manuals: Integrate the icon in digital versions of books and manuals to enhance user experience by facilitating easy navigation.
• Knowledge Bases: Use the icon in knowledge bases and FAQs to allow users to jump to specific topics of interest.

Alternative icon designs

n/a

Icon Design Checklist

Concept

• I have provided valid use cases for each icon.
• I have not added any a brand or logo icon.
• I have not used any hate symbols.
• I have not included any religious or political imagery.

Author, credits & license

• The icons are solely my own creation.

Naming

• I've read and followed the naming conventions
• I've named icons by what they are rather than their use case.
• I've provided meta JSON files in icons/[iconName].json.

Design

• I've read and followed the icon design guidelines
• I've made sure that the icons look sharp on low DPI displays.
• I've made sure that the icons look consistent with the icon set in size, optical volume and density.
• I've made sure that the icons are visually centered.
• I've correctly optimized all icons to three points of precision.

Before Submitting

• I've read the Contribution Guidelines.
• I've checked if there was an existing PR that solves the same issue.

[github-actions]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview (24px)

Icon X-rays

Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const TableOfContentsIcon = createLucideIcon('TableOfContents', [
  ["path",{"d":"M16 12H3"}],
  ["path",{"d":"M16 18H3"}],
  ["path",{"d":"M16 6H3"}],
  ["path",{"d":"M21 12h.01"}],
  ["path",{"d":"M21 18h.01"}],
  ["path",{"d":"M21 6h.01"}]
])

[jguddas]

I feel like having rotated and flipped versions is kinda WET(not Don'tRepeatYourself), not really a fan, even tho the use cases are really solid.

[karsa-mistmere]

I feel like having rotated and flipped versions is kinda WET(not Don'tRepeatYourself), not really a fan, even tho the use cases are really solid.

Part agree, part disagree, hear me out:

1. CSS transforms are cool – unless you want to apply animations or different transformations than the flipping/rotating. From then on, it can become utterly cumbersome to code your transform matrices (you can usually work around this issue by applying certain transforms to wrapper elements, but this isn't always a possibility).

2. Even if how an icon visually appears happens to be a reflection or rotation of a different icon, the use cases, hence the tags and categories may differ completely, so we do need to add at least the meta descriptors.

We could in theory add clever stuff to our JSONs that decrease redundancy in our SVG files, e.g.:

table-of-contents.json:

{
  ...,
  "generateFrom": ["list", ["flip-x"]]
}

arrow-up.json:

{
  ...,
  "generateFrom": ["arrow-right", ["rotate-90deg", "flip-y"]]
}

But up until we have something like this, I think "duplicate" icons are fine.

[jguddas]

Yeah, it's not really blocking, just something to think about.

What about naming conventions for flipped icons maybe -rtl?

[karsa-mistmere]

Yeah, it's not really blocking, just something to think about.

What about naming conventions for flipped icons maybe -rtl?

That could work for icons that are actually just RTL versions of existing ones. In this scenario, for example, I think the list/toc reflection is purely coincidental.

Edit: although I guess this could also work as a toc icon (though this isn't simply just flipped):

[ericfennis]

@jguddas Yeah, I get your points, but on the other side, why make a complex system that will rotate icons when we can just rotate the "design" ourselves? It's not worth the effort I think.