i[data-icon] {
      --image: linear-gradient(transparent, transparent);
      --size: 24px;
      --color: currentColor;
      
      display: inline-block;
      width: var(--size);
      height: var(--size);
      min-width: var(--size);
      min-height: var(--size);
      
      mask: var(--image) center/contain no-repeat;
      -webkit-mask: var(--image) center/contain no-repeat;
      background-color: var(--color);
      
      vertical-align: middle;
    }

    /* Размеры */
    i[data-icon].icon-sm { --size: 2rem; }
    i[data-icon].icon-md { --size: 4rem; }
    i[data-icon].icon-lg { --size:  6rem}
    i[data-icon].icon-xl { --size: 6.2rem; }

    /* Цвета */
    i[data-icon].icon-primary { --color: #2F89CF; }
    i[data-icon].icon-success { --color: #FF6B35; }
    i[data-icon].icon-danger { --color: #dc3545; }
    i[data-icon].icon-warning { --color: #ffc107; }
    i[data-icon].icon-white { --color: white; }
    i[data-icon].icon-black { --color: black; }

    /* SVG иконки */
    i[data-icon="mail"] {
      --image: url('./icon/mail.svg');
    }

    i[data-icon="phone"] {
      --image: url('./icon/phone.svg');
    }

    i[data-icon="project"] {
      --image: url('./icon/project.png');
    }

    i[data-icon="shield"] {
      --image: url('./icon/shield.png');
    }

    i[data-icon="box"] {
      --image: url('./icon/box.png');
    }

    i[data-icon="deal"] {
      --image: url('./icon/deal.png');
    }