amap-weather-icons's Introduction

amap-weather-icons

Background

由于高德地图天气查询 API 并没有返回相应的天气现象图标，故编写此库方便大家使用。本项目采用 Web Components 编写，支持主流的前端技术框架，感谢林间风雨提供的图片资源。

Install

npm install amap-weather-icons

Usage

Web Components

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>amap-weather-icons</title>
    <script src="https://unpkg.com/[email protected]/output/index.js"></script>
  </head>
  <body>
    <amap-weather-icons size="50" icon="暴雪"></amap-weather-icons>
  </body>
</html>

Vite

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('amap-weather-icons')
        }
      }
    })
  ]
}

Vue

<script setup>
import "amap-weather-icons";
import { ref } from "vue";

const size = ref(50);
const icon = ref("暴雪");
</script>

<template>
  <amap-weather-icons :icon="icon" :size="size"></amap-weather-icons>
</template>

React

import "amap-weather-icons";
import { useState } from "react";

function App() {
  const [size] = useState(50);
  const [icon] = useState("暴雪");

  return (
    <>
      <amap-weather-icons size={size} icon={icon}></amap-weather-icons>
    </>
  );
}

export default App;

Svelte

<script>
  import "amap-weather-icons";

  const size = 50;
  const icon = "暴雪";
</script>

<main>
  <amap-weather-icons {size} {icon}></amap-weather-icons>
</main>