Как я могу добавить SVG к кнопке переключения? - PullRequest
Новая
       39

Как я могу добавить SVG к кнопке переключения?

0 голосов
/ 11 октября 2019

У меня есть компонент ToggleButton, который я использую в нескольких местах. Для одного из его применений я бы хотел, чтобы SVG отображался как часть скользящей кнопки переключения (если вы посмотрите на пример, расположенный в ссылке в комментариях, я имею в виду часть круга).

Вот мой код для компонента: 

const ToggleButton = ({
  label,
  value,
  name,
  onChange,
}) => (
    <div className={styles.toggleButton}>
      <input
        id={name}
        type="checkbox"
        className={styles.checkbox}
        value={value}
        checked={value ? 'checked' : null}
        onChange={onChange}
      />
      <label htmlFor={name} className={styles.switch} />
    </div>
  );

export default ToggleButton;

Вот файл CSS: 

.toggleButton {
  align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 12px;
  background-color: gray;
  border-radius: 20px;
  transition: all 0.3s;
}

.switch::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: gray;
  top: -4px;
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.25);
}

.checkbox {
  display: none;
}

.checkbox:checked + .switch::after {
  left: 15px;
  background-color: blue;
}

.checkbox:checked + .switch {
  background-color: blue;
}

1 Ответ

0 голосов
/ 11 октября 2019

Некоторые примеры: 

         <style>
            .icon {
                background-color: orange;
                border: 1px solid blue;
                color: rgb(255, 0, 0) !important;
                background-image: linear-gradient(orange, orange, orange) !important;
                opacity: 1;
            }
       </style>

[data] означает строку в кодировке base64 источника svg. Вы можете встроить их в css 

 <style>
 .logo {
      background: url("data:image/svg+xml;base64,[data]");
      width:20px;
      height:20px;
 }
 </style>

в качестве источника svg внутри css 

 <style>

     .svgbg { 
        width:100%; height:150px; 
       background: url("data:image/svg+xml;utf8,<svg 
       xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44' height='44' 
        width='100'><path d='m 0,11 100,0' style='stroke:#efefef;stroke- 
      width:21.5px' /></svg>")

       /* your case hope i adopt it right in this editbox*/ 

       .checkmark{ 
         width = 14px;
         height = 11px;
         color = '#ffffff';

          background: url("data:image/svg+xml;utf8,<svg x="0px" y="0px" width= 
               {width} height={height} viewBox="0 0 38.826 29.541" > <g> 
                <polygon fill={color} points="32.194,0 15.194,17 6.445,8.217 
                0,14.771 
                15.15,29.541 38.826,6.541" /> </g> </svg>");
       }
       </style>

или используйте напрямую 

 <IMG class="icon" src="data:image/svg+xml;base64,[data]">

 <div class="logo"></div>

И наверняка все это также можно сделать в javascript. Как по вашему дизайну показать div или изображение на вашей кнопке:) 

<div className={styles.toggleButton}>
 <!-- sure src="url(..images/image.svg)" works as well -->
 <IMG class="icon" src="data:image/svg+xml;base64,[data]"> 
 <input
    id={name}
    type="checkbox"
    className={styles.checkbox}
    value={value}
    checked={value ? 'checked' : null}
    onChange={onChange}
  />
  <label htmlFor={name} className={styles.switch} />
</div>
...