[CSS] Draw Simple Icons with CSS

Using pseudo-elements like ::before and ::after we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.

 

const Radio = ({
  active,
  children,
  onChange
}) => {

  return (
    <label className="filter">
      <input checked={active}
        type="radio"
        name="filter"
        className="filter__radio"
         onChange={e => {
           onChange();
         }}
      />
      <span className={`filter__label--${children.toLowerCase()}`}>{children}</span>
    </label>
  );
};

[class^="filter__label"] {
  position: relative;
  display: inline-block;
  padding-left: 16px;
  color: rgba(236,240,241,0.3);
}

[class^="filter__label"]:hover {
  color: #ccc;
}

.filter__radio:checked + [class^="filter__label"] {
  color: #fff;
}

[class^="filter__label"]::before,
.filter__label--all::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  background: #647380;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}

.filter__radio {
  position: absolute;
  opacity: 0;
}

.filter__label--all {
  padding-left: 21px;
}

.filter__label--all::after {
  left: 5px;
}

.filter__radio:checked + .filter__label--all::before {
  background: #af544f;
}
.filter__radio:checked + .filter__label--all::after {
  background: #16a085;
}

.filter__radio:checked + .filter__label--active::before {
  background: #af544f;
}

.filter__radio:checked + .filter__label--completed::before {
  background: #16a085;
}

@media only screen and (min-width: 730px) {
  .container {
    max-width: 720px;
    justify-content: flex-end;
  }
  .todo-app {
    border-radius: 4px 4px 0 0;
  }
  .todo-list {
    order: -1;
    flex-direction: column;
  }
  [class^="todo-list__item"] {
    box-shadow: 0 1px 0 0 #e6e6e6, 0 2px 0 0 white;
  }
  .filters {
    border-radius: 3px 3px 0 0;
    order: 0;
  }
}