
        <script setup>
        import { computed } from "vue"
        import { Playground, PropsTable, ExampleHeader, PageTitle } from "@viteplay/vue"
        import { useRoute, useRouter } from "vue-router"
                
        
            let modules_0 = {}
            import  module_0_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/MDIcon/MDIcon.vue"
              modules_0["../MDIcon.vue"] = module_0_0
              
            

            let modules_1 = {}
            import  module_1_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/MDIcon/MDIcon.vue"
              modules_1["../MDIcon.vue"] = module_1_0
              
            

        let componentProps = {"MDIcon":[{"name":"name","type":"PropType<MDIcon>","required":true,"desc":""},{"name":"type","type":"PropType<'' | 'outlined' | 'sharp' | 'round' | 'two-tone'>","required":false,"desc":""}]}
        let route = useRoute()
        let router = useRouter()
        let focusId = computed(() => route.query.focus && route.hash.slice(1))
        let shouldRender = (slug) => {
          return !route.query.focus || slug === focusId.value
        }
        let hiddenCount = computed(() => {
          return ["basic","types"].filter((slug) => !shouldRender(slug)).length
        })

        let showAll = () => {
          router.push({ query: {}, hash: route.hash })
        }

        let openInEditor = (file) => {
           fetch('/__open-in-editor?file=' + encodeURIComponent(file))
        }
        </script>
        <template>
          <PageTitle title="MDIcon" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/MDIcon/MDIcon.vue')" />
          <div v-if="hiddenCount > 0" class="hidden-examples-info">
            {{ hiddenCount }} example{{ hiddenCount > 1 ? "s" : null }} hidden, <a @click.prevent="showAll" type="button" style="cursor: pointer">show all</a>
          </div>
          <PropsTable componentName="MDIcon" :componentProps="componentProps" />
          
          <section v-if="shouldRender('basic')" class="viteplay-example">

            <ExampleHeader slug="basic" title="Basic" />

            <div class="viteplay-docs"></div>

            <Playground :darkExample="false" :componentProps="componentProps" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/MDIcon/examples/Basic.vue')" :modules="modules_0" :code="decodeURI(`%3Cscript%20lang=%22ts%22%20setup%3E%0Aimport%20MDIcon%20from%20'../MDIcon.vue'%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CMDIcon%20name=%22flight%22%20/%3E%0A%20%20%3CMDIcon%20name=%22visibility_off%22%20/%3E%0A%20%20%3CMDIcon%20name=%22visibility%22%20/%3E%0A%20%20%3CMDIcon%20name=%22expand_more%22%20/%3E%0A%20%20%3CMDIcon%20name=%22chevron_left%22%20/%3E%0A%20%20%3CMDIcon%20name=%22chevron_right%22%20/%3E%0A%20%20%3CMDIcon%20name=%22close%22%20/%3E%0A%3C/template%3E`)" />
          </section>
            

          <section v-if="shouldRender('types')" class="viteplay-example">

            <ExampleHeader slug="types" title="Types" />

            <div class="viteplay-docs"></div>

            <Playground :darkExample="false" :componentProps="componentProps" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/MDIcon/examples/Types.vue')" :modules="modules_1" :code="decodeURI(`%3Cscript%20lang=%22ts%22%20setup%3E%0Aimport%20MDIcon%20from%20'../MDIcon.vue'%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3Cdiv%20class=%22_row%22%3E%0A%20%20%20%20%3Cdiv%3Edefault%3C/div%3E%0A%20%20%20%20%3Cdiv%3Eoutlined%3C/div%3E%0A%20%20%20%20%3Cdiv%3Esharp%3C/div%3E%0A%20%20%20%20%3Cdiv%3Eround%3C/div%3E%0A%20%20%20%20%3Cdiv%3Etwo-tone%3C/div%3E%0A%20%20%3C/div%3E%0A%20%20%3Cdiv%20class=%22_row%22%3E%0A%20%20%20%20%3CMDIcon%20name=%22face%22%20/%3E%0A%20%20%20%20%3CMDIcon%20name=%22face%22%20type=%22outlined%22%20/%3E%0A%20%20%20%20%3CMDIcon%20name=%22face%22%20type=%22sharp%22%20/%3E%0A%20%20%20%20%3CMDIcon%20name=%22face%22%20type=%22round%22%20/%3E%0A%20%20%20%20%3CMDIcon%20name=%22face%22%20type=%22two-tone%22%20/%3E%0A%20%20%3C/div%3E%0A%20%20%3Cdiv%20class=%22_row%22%3E%0A%20%20%20%20%3CMDIcon%20name=%22bookmarks%22%20/%3E%0A%20%20%20%20%3CMDIcon%20name=%22bookmarks%22%20type=%22outlined%22%20/%3E%0A%20%20%20%20%3CMDIcon%20name=%22bookmarks%22%20type=%22sharp%22%20/%3E%0A%20%20%20%20%3CMDIcon%20name=%22bookmarks%22%20type=%22round%22%20/%3E%0A%20%20%20%20%3CMDIcon%20name=%22bookmarks%22%20type=%22two-tone%22%20/%3E%0A%20%20%3C/div%3E%0A%3C/template%3E%0A%0A%3Cstyle%20scoped%3E%0A._row%20%7B%0A%20%20display:%20flex;%0A%20%20margin-bottom:%200.5rem;%0A%7D%0A._row%20%3E%20*%20%7B%0A%20%20width:%2080px;%0A%20%20text-align:%20center;%0A%7D%0A%3C/style%3E`)" />
          </section>
            
        </template>

<style scoped>
.hidden-examples-info {
  margin: 20px 0;
}
</style>
      