<template>
  <h2 :class="$style.heading" :style="{backgroundImage:'url('+icon+')'}">
    <slot></slot>
  </h2>
</template>
<script>
export default {
  props: {
    icon: {
      type: String,
      default: ''
    }
  }
}
</script>

<style module lang="scss">
.heading {
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 2rem auto;
  font-size: 2rem;
  font-weight: bold;
  padding-left: 2.8rem;
  margin-top: 6rem;
  &:first-child{
    margin-top:0;
  }
}
.heading.size-large {
  background-size: auto 2.4rem;
  font-size: 2.4rem;
  font-weight: bold;
  padding-left: 3.2rem;
  margin-bottom: 2rem;
}
/* .heading.-notification {
  background-image: url("~assets/images/shared/icon-notification-purple.svg");
  margin-top: 0;
}
.heading.-news {
  background-image: url("~assets/images/shared/icon-news-purple.svg");
}
.heading.-project {
  background-image: url("~assets/images/shared/icon-project-purple.svg");
}
.heading.-work {
  background-image: url("~assets/images/shared/icon-work-purple.svg");
}
.heading.-material {
  background-image: url("~assets/images/shared/icon-material-purple.svg");
} */
@include mq-sp {
  .heading {
    padding-left: 4.6rem;
    margin-bottom: 2rem;
    background-position: 2rem center;
    background-repeat: no-repeat;
    background-size: 2rem auto;
  }
}
</style>
