2.0.0 • Published 5 years ago

@jekatigr/ui-core v2.0.0

Weekly downloads
60
License
MIT
Repository
github
Last release
5 years ago

@jekatigr/ui-core

new

React UI components library.

Getting started

$ npm install --save @jekatigr/ui-core
$ yarn add @jekatigr/ui-core

Development notes

Build

$ yarn run build

Interactive demo

$ yarn run docz:dev

The demo will be available at http://localhost:3000/megafon-ui/.

How gulp modify svg

Для модификации используется плагин gulp-svgmin(на основе svgo), который добавляет уникальный атрибут id для тегов и переводит тег <style> в инлайн стили. В svg могут оставаться много тегов <mask> и <clipPath>, которые не всегда правильно воспринимаются бразуером при использовании спрайта. Разработчик svgo не нашел хорошего алгоритма для того, чтобы убирать <mask> и <clipPath>. Svgo Issue

Для <mask> написан скрипт, который рекурсивно находит все вложенности и заменяет теги.

Стили добавляются программой дизайнеров, в идеале их не должно быть. В спрайте тег <defs> кладется в отдельное место, что затрудняет чтение тегов браузером, лучше от них избавляться по возможности. Градиенты всегда находятся в <defs>, поэтому Icons с ними могут не работать в спрайте.

<clipPath> заменять в коде файла.

Пример, было:

<svg id="Ready" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
    <defs>
        <style>
        .cls-1,
        .cls-2 {
            fill: none;
        }

        .cls-1 {
            clip-rule: evenodd;
        }

        .cls-3 {
            clip-path: url(#clip-path);
        }

        .cls-4 {
            clip-path: url(#clip-path-2);
        }
        </style>
        <clipPath id="clip-path">
            <path class="cls-1" d="M28,16a15.78,15.78,0,0,1-1.94,1.73L27.83,20,26.2,21.16l-1.77-2.31a16.29,16.29,0,0,1-2.62,1.24l.94,2.73-1.92.59-.94-2.74a16.66,16.66,0,0,1-2.89.43v2.64H15V21.11a16.7,16.7,0,0,1-3-.45l-.86,2.52-1.92-.59.87-2.52a16.29,16.29,0,0,1-2.54-1.21L5.8,21.16,4.17,20l1.77-2.3A15.78,15.78,0,0,1,4,16l1.51-1.26a14.47,14.47,0,0,0,21,0Zm-4-5.07-1,1.81a13.7,13.7,0,0,0-7-2,13.57,13.57,0,0,0-7,2L8,10.94A15.68,15.68,0,0,1,24,10.94Z" />
        </clipPath>
        <clipPath id="clip-path-2">
            <rect class="cls-2" y="-0.25" width="32" height="32" />
        </clipPath>
    </defs>
    <title>Artboard 21</title>
    <g class="cls-3">
        <g class="cls-4">
            <rect x="-1" y="3.75" width="34" height="25" />
        </g>
    </g>
</svg>

Стало:

<svg id="Ready" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
    <title>Artboard 21</title>
    <path class="cls-1" d="M28,16a15.78,15.78,0,0,1-1.94,1.73L27.83,20,26.2,21.16l-1.77-2.31a16.29,16.29,0,0,1-2.62,1.24l.94,2.73-1.92.59-.94-2.74a16.66,16.66,0,0,1-2.89.43v2.64H15V21.11a16.7,16.7,0,0,1-3-.45l-.86,2.52-1.92-.59.87-2.52a16.29,16.29,0,0,1-2.54-1.21L5.8,21.16,4.17,20l1.77-2.3A15.78,15.78,0,0,1,4,16l1.51-1.26a14.47,14.47,0,0,0,21,0Zm-4-5.07-1,1.81a13.7,13.7,0,0,0-7-2,13.57,13.57,0,0,0-7,2L8,10.94A15.68,15.68,0,0,1,24,10.94Z" />
</svg>
3.0.0-beta.10

5 years ago

3.0.0-beta.9

5 years ago

3.0.0-beta.8

5 years ago

3.0.0-beta.1

5 years ago

3.0.0-beta.0

5 years ago

3.0.0-beta.3

5 years ago

3.0.0-beta.2

5 years ago

3.0.0-beta.5

5 years ago

3.0.0-beta.4

5 years ago

3.0.0-beta.7

5 years ago

3.0.0-beta.6

5 years ago

2.0.1-beta.0

5 years ago

2.0.0-beta.0

5 years ago

2.0.0

5 years ago

1.5.0-beta.0

5 years ago

1.4.9

5 years ago

1.4.8

5 years ago

1.4.7

5 years ago

1.4.6

5 years ago

1.4.5

5 years ago

1.4.4

5 years ago

1.4.3

5 years ago

1.4.2

5 years ago

3.2.15

6 years ago

3.2.14

6 years ago

3.2.13

6 years ago

3.2.12

6 years ago

3.2.11

6 years ago

3.2.10

6 years ago

3.2.9

6 years ago

3.2.8

6 years ago

3.2.7

6 years ago

3.2.6

6 years ago

3.2.5

6 years ago

3.2.4

6 years ago

3.2.3

6 years ago

3.2.1

6 years ago

3.2.0

6 years ago

3.1.9

6 years ago

3.1.8

6 years ago

3.1.7

6 years ago

3.1.6

6 years ago

3.1.5

6 years ago

3.1.4

6 years ago

3.1.3

6 years ago

3.1.2

6 years ago

3.1.0

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.0.1

6 years ago

1.0.4

6 years ago

1.0.2

6 years ago

1.3.54

6 years ago

1.3.53

6 years ago

1.3.52

6 years ago

1.3.51

6 years ago

1.3.50

6 years ago

1.3.48

6 years ago