Блог

Главная - Вопросы по программированию - Тема иконки на боковой панели сборника рассказов

Тема иконки на боковой панели сборника рассказов

#storybook

#сборник рассказов

Вопрос:

Мне было интересно, есть ли способ оформить иконки на боковой панели сборника рассказов?. Смотрите скриншот ниже

Мне удалось создать тему Storybook, но, к сожалению, я не смог найти способ оформить иконки на боковой панели.

Спасибо, Кавин Мехта.

Комментарии:

1. Вы нашли способ изменить эти иконки?

2. К сожалению, нет.

3. На самом деле, я нашел хитрый способ изменить эти иконки :)) Я опубликую ответ ниже.

Ответ №1:

Это несколько банально, но у меня сработало. Все, что вам нужно сделать, это использовать Javascript для обновления значков в DOMContentLoaded обратном вызове события. Добавьте этот фрагмент кода в конец .storybook/mana&er-head.html файла и повторно запустите сборник рассказов, чтобы увидеть результаты.

 
  document.addEventListener("DOMContentLoaded", function () {
    let bookmarkHollowIcon = document.&etElementById(
      "icon--bookmarkhollow"
    ).firstChild;
    bookmarkHollowIcon.setAttribute(
      "d",
      "M 943.548 481.063 C 950.438 497.039 954 514.416 954 532.001 C 954 549.586 950.438 566.962 943.548 582.939 C 936.665 598.915 926.615 613.113 914.108 624.557 L 631.498 883.042 C 621.145 892.507 607.959 897.714 594.323 897.714 L 127.121 897.714 C 111.971 897.714 97.443 891.292 86.731 879.86 C 76.018 868.428 70 852.929 70 836.764 L 70 227.238 C 70 211.073 76.018 195.57 86.731 184.139 C 97.443 172.708 111.971 166.286 127.121 166.286 L 594.323 166.286 C 607.959 166.287 621.145 171.491 631.498 180.96 L 914.108 439.445 C 926.615 450.89 936.665 465.086 943.548 481.063 Z M 822.288 567.27 C 826.554 563.364 830.277 558.245 832.926 552.098 C 835.573 545.945 837.017 539.075 837.017 532.001 C 837.017 524.927 835.573 518.056 832.926 511.904 C 830.277 505.756 826.554 500.638 822.288 496.732 L 568.454 264.567 L 166.984 264.567 L 166.984 799.434 L 568.454 799.434 L 822.288 567.27 Z"
    );
    bookmarkHollowIcon.setAttribute("fill-rule", "evenodd");
  });

Я заменил d атрибут значка SVG на желаемый значок. Вот результат:

Ответ №2:

У меня это решение сработало. Удалите заливку для значков sv& и заполните ее в соответствии с темой. А затем добавьте декоратора к желаемой истории (https://storybook.js.or&/docs/react/writin&-stories/decorators). Что-то вроде этого

 export const Dark = Template.bind({});

    Dark.ar&s = {};
    Dark.decorators = [ThemeDecorator(Theme.DARK)];