svelte simple icons

ไอคอนเรียบง่ายเพรียวบาง " src="/uploads/20241230/img_677258dd59f5b30.png" width="150" style="max-width: 100%;">

ไอคอนเรียบง่าย svelte

แพ็คเกจนี้มอบ Simple Icons 13.21.0 ที่บรรจุเป็นชุดส่วนประกอบ Svelte

การติดตั้ง

ติดตั้งแพ็คเกจในไดเร็กทอรีโครงการของคุณด้วย:

// with yarn
yarn add @icons-pack/svelte-simple-icons

// with npm
npm add @icons-pack/svelte-simple-icons

การใช้งาน

ไอคอนทั้งหมดจะถูกนำเข้าจากไฟล์เดียว โดยที่ [ICON SLUG] จะถูกแทนที่ด้วยตัวทากที่เป็นตัวพิมพ์ใหญ่

สาธิต

แก้ไขโค้ดแซนด์บ็อกซ์

ตัวอย่างพื้นฐาน

  <!-- Import a specific icon by its slug as: -->
  <!-- import { Si[ICON SLUG] } from 'simple-icons'; -->

  < script >
    import { SiReact , SiSvelte , SiDocker } from " @icons-pack/svelte-simple-icons " ;
  </ script >

  < SiSvelte color = "#FF3E00" size ={ 90 } />

  < SiReactJs color = "#61DAFB" size ={ 50 } />

  < SiDocker />

เปลี่ยนชื่อเรื่อง

  <!-- title default "Svelte" -->
  < script >
    import { SiSvelte } from " @icons-pack/svelte-simple-icons " ;
  </ script >

  < SiSvelte title = " My title " />

สไตล์ที่กำหนดเอง

  < script >
    import { SiSvelte } from " @icons-pack/svelte-simple-icons " ;
  </ script >

  < SiSvelte class = " myStyle " />

  < style >
    .myStyle {
      width : 35 px ;
      height : 35 px ;
    }
  </ style >

พิมพ์คำจำกัดความสำหรับไอคอนไดนามิกในส่วนประกอบ Svelte

บางครั้ง เราต้องการจัดเตรียมส่วนประกอบแบบไดนามิกให้กับส่วนประกอบ เราสามารถทำได้โดยใช้คุณลักษณะ svelte:component กับคำจำกัดความประเภทประเภทตัวช่วย SiComponentType

< script lang = " ts " >
  import type { SiComponentType } from ' @icons-pack/svelte-simple-icons ' ;

  export let icon : SiComponentType ;
  export let text : string ;
  export let click : () => void = () => console . log ( ' do something ' );
</ script >

< button on:click ={ click }>
  < svelte:component
    this ={ icon }
    title ={ text } <!-- optional , along with size and color properties --> 
  />
  { text }
</ button >

< style lang = " scss " >
  button {
    display : flex ;
    flex-direction : row ;
    text-decoration : none ;
    white-space : nowrap ;
    transition : border-color 0.25 s ;
    box-shadow : none ;
    text-shadow : none ;
  }

  .icon {
    margin : 4 px 4 px 0 0 ;
  }
</ style >

การรวบรวมที่รวดเร็วยิ่งขึ้น

หากคุณต้องการเพียงไม่กี่ไอคอน คุณสามารถนำเข้าทีละไอคอน แทนที่จะนำเข้าทั้งไฟล์เพื่อปรับปรุงการคอมไพล์

< script >
  import SiSvelte from " @icons-pack/svelte-simple-icons/icons/SiSvelte.svelte " ;
  import SiGithub from " @icons-pack/svelte-simple-icons/icons/SiGithub.svelte " ;
</ script >

< SiGithub />
< SiSvelte />