> ## Content Index
> Fetch the complete content index at: https://blog.lsonline.fr/llms.txt
> Use this file to discover other available public pages before exploring further.

# SPFx Table Of Contents Extension v1.0.0
- URL: https://blog.lsonline.fr/2020/11/26/spfx-table-of-contents-extension-v1-0-0/
- Published: 2020-11-26T00:01:57.000Z
- Updated: 2026-01-27T18:54:42.000Z
- Description: A new version of the SPFx Table of Contents Extension was released to display all headers of a page into a site page
- Author: Laurent Sittler
- Tags: SharePoint Framework, SharePoint, Development

A new version of the SharePoint Framework Table of Contents extension was released to display all headers of a page into a site page.

## New version of Table of Contents - v1.0.0

This release includes a fix for the bug about the icon that is not visible and a feature to specify a custom image rather than using Fluent UI icons as well as some other improvements.

### Fix Icon display

Some users can not see the UI Fluent icon even if this one was correctly configured.

To fix this issue, the Icon React element is used rather than the CSS class only. Thanks to this method, the selected icon is embedded and can be displayed.

### Image Icon

![](https://blog.lsonline.fr/content/images/2020/10/Screen-Shot-2020-10-21-at-22.41.58.png)

Table of Contents button with a custom image

If the panoply of UI Fluent Icons is not sufficient for you, you can now specify the URL of your own image/icon into the property of the extension. To use it, simply add the property `tocImage` and specify the image URL accessible for all of your users.

> \[note\]**Note**  
> I*f you use both `tocImage` and `tocIcon`, tocImage has priority*

### Code Coverage

It was a challenge and an opportunity to include this kind of test into this solution. I will try to include more tests for each new version to reach 100%.

In addition, the code coverage helped me to find solutions for some potential issues that already exist and maybe others not already referenced.

### Other

- Upgrade the solution to [SPFx 1.11.0](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/release-1.11.0?ref=blog.lsonline.fr)
- Add french support language
- Add some CI verification during an MR

  
[ ![](https://blog.lsonline.fr/content/images/2021/01/gitlab-white-64.png) Table of Contents Extension repository ](https://gitlab.lsonline.fr/SharePoint/sp-dev-fx-webparts/toc?ref=blog.lsonline.fr)
  
  
Hoping this post will help you ?