159 lines
6.7 KiB
Swift
159 lines
6.7 KiB
Swift
import Elementary
|
|
|
|
public struct SVG: HTML, Sendable {
|
|
let color: String
|
|
let size: SVGSize
|
|
let svg: SVGType
|
|
|
|
public init(
|
|
_ svg: SVGType,
|
|
color: String,
|
|
size: SVGSize = .init()
|
|
) {
|
|
self.svg = svg
|
|
self.size = size
|
|
self.color = color
|
|
}
|
|
|
|
public init(
|
|
_ svg: SVGType,
|
|
color: Color.TextColor,
|
|
size: SVGSize = .init()
|
|
) {
|
|
self.svg = svg
|
|
self.size = size
|
|
self.color = color.color
|
|
}
|
|
|
|
public var content: some HTML<HTMLTag.div> {
|
|
div(.class("block \(color)")) {
|
|
svg.html(size)
|
|
}
|
|
}
|
|
}
|
|
|
|
public struct SVGSize: Sendable {
|
|
let width: Int
|
|
let height: Int
|
|
|
|
public init(width: Int = 24, height: Int? = nil) {
|
|
self.width = width
|
|
self.height = height ?? width
|
|
}
|
|
}
|
|
|
|
public enum SVGType: Sendable {
|
|
case calculator
|
|
case exclamation
|
|
case menu
|
|
case thermometer
|
|
case toolbox
|
|
case wind
|
|
|
|
public func html(_ size: SVGSize) -> some HTML {
|
|
switch self {
|
|
case .calculator: return calculatorSvg(size: size)
|
|
case .exclamation: return exclamationSvg(size: size)
|
|
case .menu: return menuSvg(size: size)
|
|
case .thermometer: return thermometerSvg(size: size)
|
|
case .toolbox: return toolboxSvg(size: size)
|
|
case .wind: return windSvg(size: size)
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - SVGs
|
|
|
|
// swiftlint:disable line_length
|
|
|
|
// TODO: Requires attribution:
|
|
// Vectors and icons by <a href="https://dribbble.com/Laridae?ref=svgrepo.com" target="_blank">Laridae</a> in CC Attribution License via <a href="https://www.svgrepo.com/" target="_blank">SVG Repo</a>
|
|
// FIX: This doesn't work, but does as a file
|
|
private func toolboxSvg(size: SVGSize) -> HTMLRaw {
|
|
HTMLRaw("""
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
|
|
<svg width="\(size.width)" height="\(size.height)" stroke="currentColor" viewBox="0 0 \(size.width) \(size.height)" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000">
|
|
|
|
<g id="SVGRepo_bgCarrier" stroke="currentColor" stroke-width="2"/>
|
|
|
|
<g id="SVGRepo_tracerCarrier" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
<g id="SVGRepo_iconCarrier">
|
|
|
|
<path d="M619.52 194.56h35.84V128c0-5.632-4.608-10.24-10.24-10.24H378.88c-5.632 0-10.24 4.608-10.24 10.24v66.56h35.84v-30.72c0-5.632 4.608-10.24 10.24-10.24h194.56c5.632 0 10.24 4.608 10.24 10.24v30.72z" fill="#2C7FFF"/>
|
|
|
|
<path d="M184.32 209.92v20.48h655.36v-20.48H184.32z m-5.12-15.36h665.6c5.632 0 10.24 4.608 10.24 10.24v30.72c0 5.632-4.608 10.24-10.24 10.24H179.2c-5.632 0-10.24-4.608-10.24-10.24v-30.72c0-5.632 4.608-10.24 10.24-10.24zM240.64 890.88h51.2v-10.24H240.64v10.24z m-5.12-25.6h61.44c5.632 0 10.24 4.608 10.24 10.24v20.48c0 5.632-4.608 10.24-10.24 10.24H235.52c-5.632 0-10.24-4.608-10.24-10.24v-20.48c0-5.632 4.608-10.24 10.24-10.24zM737.28 890.88h51.2v-10.24h-51.2v10.24z m-5.12-25.6h61.44c5.632 0 10.24 4.608 10.24 10.24v20.48c0 5.632-4.608 10.24-10.24 10.24h-61.44c-5.632 0-10.24-4.608-10.24-10.24v-20.48c0-5.632 4.608-10.24 10.24-10.24z" fill=""/>
|
|
|
|
<path d="M199.68 343.04h122.88c5.632 0 10.24 4.608 10.24 10.24v81.92c0 5.632-4.608 10.24-10.24 10.24H199.68c-5.632 0-10.24-4.608-10.24-10.24V353.28c0-5.632 4.608-10.24 10.24-10.24zM701.44 343.04h122.88c5.632 0 10.24 4.608 10.24 10.24v81.92c0 5.632-4.608 10.24-10.24 10.24h-122.88c-5.632 0-10.24-4.608-10.24-10.24V353.28c0-5.632 4.608-10.24 10.24-10.24z" fill="#2C7FFF"/>
|
|
|
|
<path d="M873.472 276.48H148.48c-11.264 1.024-19.456 10.752-18.432 22.016l48.128 522.24c1.024 10.752 9.728 18.432 20.48 18.432h626.688c10.752 0 19.456-8.192 20.48-18.432l48.64-522.24v-2.048c-0.512-10.752-9.728-19.968-20.992-19.968zM150.528 291.84h722.944c3.072 0 5.12 2.048 5.12 5.632L870.4 384h-35.84v-30.72c0-5.632-4.608-10.24-10.24-10.24h-122.88c-5.632 0-10.24 4.608-10.24 10.24v30.72H332.8v-30.72c0-5.632-4.608-10.24-10.24-10.24H199.68c-5.632 0-10.24 4.608-10.24 10.24v30.72h-36.352l-8.192-86.528c0-3.072 2.048-5.12 5.632-5.632zM819.2 358.4v71.68h-112.64V358.4h112.64z m-501.76 0v71.68H204.8V358.4h112.64z m513.024 461.312c0 2.56-2.56 4.608-5.12 4.608H198.144c-2.56 0-4.608-2.048-5.12-4.608L154.624 399.36H189.44v35.84c0 5.632 4.608 10.24 10.24 10.24h122.88c5.632 0 10.24-4.608 10.24-10.24v-35.84h358.4v35.84c0 5.632 4.608 10.24 10.24 10.24h122.88c5.632 0 10.24-4.608 10.24-10.24v-35.84h34.816l-38.912 420.352z" fill=""/>
|
|
|
|
</g>
|
|
|
|
</svg>
|
|
""")
|
|
}
|
|
|
|
private func exclamationSvg(size: SVGSize) -> HTMLRaw {
|
|
HTMLRaw("""
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="\(size.width)" height="\(size.height)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
|
|
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
|
|
<path d="M12 9v4"></path>
|
|
<path d="M12 17h.01"></path>
|
|
</svg>
|
|
""")
|
|
}
|
|
|
|
private func windSvg(size: SVGSize) -> HTMLRaw {
|
|
return HTMLRaw("""
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="\(size.width)" height="\(size.height)" viewBox="0 0 \(size.width) \(size.height)" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="w-8 h-8">
|
|
<path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path>
|
|
<path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path>
|
|
<path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path>
|
|
</svg>
|
|
""")
|
|
}
|
|
|
|
private func calculatorSvg(size: SVGSize) -> HTMLRaw {
|
|
return HTMLRaw("""
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="\(size.width)" height="\(size.height)" viewBox="0 0 \(size.width) \(size.height)" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="w-5 h-5">
|
|
<rect width="16" height="20" x="4" y="2" rx="2"></rect>
|
|
<line x1="8" x2="16" y1="6" y2="6"></line>
|
|
<line x1="16" x2="16" y1="14" y2="18"></line>
|
|
<path d="M16 10h.01"></path>
|
|
<path d="M12 10h.01"></path>
|
|
<path d="M8 10h.01"></path>
|
|
<path d="M12 14h.01"></path>
|
|
<path d="M8 14h.01"></path>
|
|
<path d="M12 18h.01"></path><path d="M8 18h.01"></path>
|
|
</svg>
|
|
""")
|
|
}
|
|
|
|
private func thermometerSvg(size: SVGSize) -> HTMLRaw {
|
|
HTMLRaw("""
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="\(size.width)" height="\(size.height)" viewBox="0 0 \(size.width) \(size.height)" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="w-8 h-8">
|
|
<path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z"></path>
|
|
</svg>
|
|
""")
|
|
}
|
|
|
|
private func menuSvg(size: SVGSize) -> HTMLRaw {
|
|
HTMLRaw("""
|
|
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24" x="0" y="0" id="menu-icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
|
|
""")
|
|
}
|
|
|
|
// swiftlint:enable line_length
|