由于高德地图 天气查询 API 并没有返回相应的 天气现象 图标，故编写此库方便大家使用。本项目采用 Web Components 编写，支持主流的前端技术框架，感谢 林间风雨 提供的图片资源。
npm install amap-weather-icons<!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/amap-weather-icons@0.0.6/output/index.js"></script>
</head>
<body>
<amap-weather-icons size="50" icon="暴雪"></amap-weather-icons>
</body>
</html>// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('amap-weather-icons')
}
}
})
]
}<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>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;<script>
import "amap-weather-icons";
const size = 50;
const icon = "暴雪";
</script>
<main>
<amap-weather-icons {size} {icon}></amap-weather-icons>
</main>| Name | Description | Type | Default |
|---|---|---|---|
| icon | weather phenomena | string | 未知 |
| size | SVG width/height px | string/number | 256 |