FileMaster

Edit File: svgIcon.vue

<template>
  <svg v-if="iconName === 'onsite'" width="36" height="36" viewBox="0 0 36 36" :fill="iconColor" xmlns="http://www.w3.org/2000/svg">
    <path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M9.55686 6.47237C11.8039 4.24782 14.8381 3.00003 18 3.00018C21.1619 3.00003 24.1961 4.24782 26.4431 6.47237C28.6902 8.69692 29.9684 11.7184 30 14.8802C30 23.1002 19.5 32.2502 18.975 32.6402C18.7033 32.8726 18.3575 33.0003 18 33.0003C17.6425 33.0003 17.2967 32.8726 17.025 32.6402L17.0225 32.6381C16.5381 32.2182 6 23.0858 6 14.8802C6.03162 11.7184 7.30985 8.69692 9.55686 6.47237ZM18 18.0002C19.933 18.0002 21.5 16.4332 21.5 14.5002C21.5 12.5672 19.933 11.0002 18 11.0002C16.067 11.0002 14.5 12.5672 14.5 14.5002C14.5 16.4332 16.067 18.0002 18 18.0002Z" :fill="iconColor"/>
    <path d="M18 3.00018C14.8381 3.00003 11.8039 4.24782 9.55686 6.47237C7.30985 8.69692 6.03162 11.7184 6 14.8802C6 23.1002 16.575 32.2502 17.025 32.6402C17.2967 32.8726 17.6425 33.0003 18 33.0003C18.3575 33.0003 18.7033 32.8726 18.975 32.6402C19.5 32.2502 30 23.1002 30 14.8802C29.9684 11.7184 28.6902 8.69692 26.4431 6.47237C24.1961 4.24782 21.1619 3.00003 18 3.00018ZM18 29.4752C15.495 27.0902 9 20.4752 9 14.8802C9 12.4932 9.94821 10.204 11.636 8.51622C13.3239 6.82839 15.6131 5.88018 18 5.88018C20.3869 5.88018 22.6761 6.82839 24.364 8.51622C26.0518 10.204 27 12.4932 27 14.8802C27 20.4302 20.505 27.0902 18 29.4752Z" :fill="iconColor"/>
    <path d="M18 9.00018C16.9617 9.00018 15.9466 9.30809 15.0833 9.88497C14.2199 10.4618 13.547 11.2818 13.1496 12.2411C12.7523 13.2004 12.6483 14.256 12.8509 15.2744C13.0535 16.2928 13.5535 17.2283 14.2877 17.9625C15.0219 18.6967 15.9574 19.1967 16.9758 19.3993C17.9942 19.6019 19.0498 19.4979 20.0091 19.1006C20.9684 18.7032 21.7883 18.0303 22.3652 17.1669C22.9421 16.3036 23.25 15.2885 23.25 14.2502C23.25 12.8578 22.6969 11.5224 21.7123 10.5379C20.7277 9.55331 19.3924 9.00018 18 9.00018ZM18 16.5002C17.555 16.5002 17.12 16.3682 16.75 16.121C16.38 15.8738 16.0916 15.5224 15.9213 15.1112C15.751 14.7001 15.7064 14.2477 15.7932 13.8112C15.8801 13.3748 16.0943 12.9739 16.409 12.6592C16.7237 12.3445 17.1246 12.1302 17.561 12.0434C17.9975 11.9566 18.4499 12.0012 18.861 12.1715C19.2722 12.3418 19.6236 12.6301 19.8708 13.0002C20.118 13.3702 20.25 13.8052 20.25 14.2502C20.25 14.8469 20.013 15.4192 19.591 15.8412C19.169 16.2631 18.5967 16.5002 18 16.5002Z" :fill="iconColor"/>
  </svg>
  <svg v-else-if="iconName === 'mollie' || iconName === 'square'" width="36" height="36" viewBox="0 0 36 36" :fill="iconColor" xmlns="http://www.w3.org/2000/svg">
    <rect x="5.5" y="9.00018" width="25" height="5" fill="none"/>
    <path d="M28.5 7.50018H7.5C6.30653 7.50018 5.16193 7.97429 4.31802 8.8182C3.47411 9.66212 3 10.8067 3 12.0002V24.0002C3 25.1937 3.47411 26.3383 4.31802 27.1822C5.16193 28.0261 6.30653 28.5002 7.5 28.5002H28.5C29.6935 28.5002 30.8381 28.0261 31.682 27.1822C32.5259 26.3383 33 25.1937 33 24.0002V12.0002C33 10.8067 32.5259 9.66212 31.682 8.8182C30.8381 7.97429 29.6935 7.50018 28.5 7.50018ZM6 12.0002C6 11.6024 6.15804 11.2208 6.43934 10.9395C6.72064 10.6582 7.10218 10.5002 7.5 10.5002H28.5C28.8978 10.5002 29.2794 10.6582 29.5607 10.9395C29.842 11.2208 30 11.6024 30 12.0002V13.5002H6V12.0002ZM30 24.0002C30 24.398 29.842 24.7795 29.5607 25.0608C29.2794 25.3421 28.8978 25.5002 28.5 25.5002H7.5C7.10218 25.5002 6.72064 25.3421 6.43934 25.0608C6.15804 24.7795 6 24.398 6 24.0002V16.5002H30V24.0002Z" :fill="iconColor"/>
    <path d="M10.5 22.5002H16.5C16.8978 22.5002 17.2794 22.3421 17.5607 22.0608C17.842 21.7795 18 21.398 18 21.0002C18 20.6024 17.842 20.2208 17.5607 19.9395C17.2794 19.6582 16.8978 19.5002 16.5 19.5002H10.5C10.1022 19.5002 9.72064 19.6582 9.43934 19.9395C9.15804 20.2208 9 20.6024 9 21.0002C9 21.398 9.15804 21.7795 9.43934 22.0608C9.72064 22.3421 10.1022 22.5002 10.5 22.5002Z" :fill="iconColor"/>
    <path d="M22.5 22.5002H25.5C25.8978 22.5002 26.2794 22.3421 26.5607 22.0608C26.842 21.7795 27 21.398 27 21.0002C27 20.6024 26.842 20.2208 26.5607 19.9395C26.2794 19.6582 25.8978 19.5002 25.5 19.5002H22.5C22.1022 19.5002 21.7206 19.6582 21.4393 19.9395C21.158 20.2208 21 20.6024 21 21.0002C21 21.398 21.158 21.7795 21.4393 22.0608C21.7206 22.3421 22.1022 22.5002 22.5 22.5002Z" :fill="iconColor"/>
  </svg>
</template>

<script>

export default {
  props: {
    iconName: {
      type: String,
      default: ''
    },
    iconColor: {
      type: String,
      default: 'currentColor'
    }
  },

data () {
    return {

}
  },

methods: {}
}
</script>

Back