@jjlmoya/utils-diy 1.14.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-diy",
-    "version": "1.14.0",
+    "version": "1.15.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/pythagoreanRightAngleCalculator/component.astro

@@ -1,17 +1,22 @@
 ---
+import { Icon } from 'astro-icon/components';
 import type { PythagoreanRightAngleCalculatorUI } from './ui';
+
 interface Props { ui?: PythagoreanRightAngleCalculatorUI; }
 const { ui } = Astro.props;
 const t = (ui ?? {}) as PythagoreanRightAngleCalculatorUI;
 ---
 
-<div class="prac-root" data-ui={JSON.stringify(t)}>
+<div class="prac-root" data-prac-root data-ui={JSON.stringify(t)}>
   <div class="prac-container">
     <aside class="prac-inputs">
-      <div class="prac-unit-selector">
-        <button class="prac-unit-btn active" data-unit="in">{t.btnUnitInches}</button>
-        <button class="prac-unit-btn" data-unit="ft">{t.btnUnitFeet}</button>
-        <button class="prac-unit-btn" data-unit="cm">{t.btnUnitCentimeters}</button>
+      <div class="prac-input-group">
+        <label>{t.labelUnitSelection || 'Units'}</label>
+        <div class="prac-unit-selector">
+          <button class="prac-unit-btn active" data-unit="in">{t.btnUnitInches}</button>
+          <button class="prac-unit-btn" data-unit="ft">{t.btnUnitFeet}</button>
+          <button class="prac-unit-btn" data-unit="cm">{t.btnUnitCentimeters}</button>
+        </div>
       </div>
 
       <div class="prac-input-group">
@@ -31,10 +36,10 @@ const t = (ui ?? {}) as PythagoreanRightAngleCalculatorUI;
 
       <div class="prac-button-group">
         <button id="prac-clear" class="prac-btn prac-btn-icon" title={t.btnClear}>
-          <i class="mdi mdi-delete"></i>
+          <Icon name="mdi:delete" />
         </button>
         <button id="prac-copy" class="prac-btn prac-btn-icon" title={t.btnCopyResults}>
-          <i class="mdi mdi-content-copy"></i>
+          <Icon name="mdi:content-copy" />
         </button>
       </div>
 
@@ -179,7 +184,7 @@ const t = (ui ?? {}) as PythagoreanRightAngleCalculatorUI;
     const a = parseFloat(inputA.value) || 0;
     const b = parseFloat(inputB.value) || 0;
     const d = parseFloat(inputD.value) || null;
-    const calc = calculateSquaring(a, b, d, ui);
+    const calc = calculateSquaring(a, b, d, { unit: currentUnit, ui });
 
     if (calc.hypotenuse > 0) {
       resultIdeal.textContent = calc.hypotenuse.toFixed(2);
@@ -228,9 +233,9 @@ const t = (ui ?? {}) as PythagoreanRightAngleCalculatorUI;
     else if (currentUnit === 'cm') unitText = ui.unitCentimeters;
     const text = `${ui.labelIdealDiagonal || 'Ideal'}: ${resultIdeal.textContent}${unitText}, ${ui.labelDeviation || 'Deviation'}: ${resultDev.textContent}${unitText}`;
     navigator.clipboard.writeText(text).then(() => {
-      const originalText = copyBtn.innerHTML;
-      copyBtn.innerHTML = '<i class="mdi mdi-check"></i>';
-      setTimeout(() => (copyBtn.innerHTML = originalText), 1500);
+      const originalHTML = copyBtn.innerHTML;
+      copyBtn.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>';
+      setTimeout(() => (copyBtn.innerHTML = originalHTML), 1500);
     });
   });
 

package/src/tool/pythagoreanRightAngleCalculator/i18n/de.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Einheit',
     btnUnitInches: 'Zoll',
     btnUnitFeet: 'Fuß',
+    btnUnitCentimeters: 'Zentimeter',
     labelSideA: 'Seite A',
     labelSideB: 'Seite B',
     labelMeasuredDiagonal: 'Gemessene Diagonale (optional)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Schnellwahl',
     unitInches: 'in',
     unitFeet: 'ft',
+    unitCentimeters: 'cm',
     tooltipOptional: 'Geben Sie Ihre gemessene Diagonale ein, um den 90-Grad-Winkel zu prüfen',
     tooltipPresets: '3-4-5-Regel in verschiedenen Maßstäben',
     statusPerfect: 'Perfekter 90-Grad-Winkel',

package/src/tool/pythagoreanRightAngleCalculator/i18n/es.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Unidad',
     btnUnitInches: 'pulgadas',
     btnUnitFeet: 'pies',
+    btnUnitCentimeters: 'centímetros',
     labelSideA: 'Lado A',
     labelSideB: 'Lado B',
     labelMeasuredDiagonal: 'Diagonal medida (opcional)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Ajustes rápidos',
     unitInches: 'pul',
     unitFeet: 'pie',
+    unitCentimeters: 'cm',
     tooltipOptional: 'Introduce tu diagonal medida para verificar los 90 grados',
     tooltipPresets: 'Regla 3-4-5 en diferentes escalas',
     statusPerfect: 'Ángulo de 90 grados perfecto',

package/src/tool/pythagoreanRightAngleCalculator/i18n/fr.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Unité',
     btnUnitInches: 'pouces',
     btnUnitFeet: 'pieds',
+    btnUnitCentimeters: 'centimètres',
     labelSideA: 'Côté A',
     labelSideB: 'Côté B',
     labelMeasuredDiagonal: 'Diagonale mesurée (optionnel)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Réglages rapides',
     unitInches: 'po',
     unitFeet: 'pi',
+    unitCentimeters: 'cm',
     tooltipOptional: 'Entrez votre diagonale mesurée pour vérifier les 90 degrés',
     tooltipPresets: 'Règle 3-4-5 à différentes échelles',
     statusPerfect: 'Angle de 90 degrés parfait',

package/src/tool/pythagoreanRightAngleCalculator/i18n/id.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Unit',
     btnUnitInches: 'inci',
     btnUnitFeet: 'kaki',
+    btnUnitCentimeters: 'sentimeter',
     labelSideA: 'Sisi A',
     labelSideB: 'Sisi B',
     labelMeasuredDiagonal: 'Diagonal terukur (opsional)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Preset cepat',
     unitInches: 'in',
     unitFeet: 'ft',
+    unitCentimeters: 'cm',
     tooltipOptional: 'Masukkan diagonal terukur Anda untuk memverifikasi sudut 90 derajat',
     tooltipPresets: 'Aturan 3-4-5 dalam berbagai skala',
     statusPerfect: 'Sudut 90 derajat sempurna',

package/src/tool/pythagoreanRightAngleCalculator/i18n/it.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Unità',
     btnUnitInches: 'pollici',
     btnUnitFeet: 'piedi',
+    btnUnitCentimeters: 'centimetri',
     labelSideA: 'Lato A',
     labelSideB: 'Lato B',
     labelMeasuredDiagonal: 'Diagonale misurata (opzionale)',
@@ -110,7 +111,8 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Regolazioni rapide',
     unitInches: 'pol',
     unitFeet: 'pie',
-    tooltipOptional: 'Inserisci la diagonale misurata per verificare i 90 gradi',
+    unitCentimeters: 'cm',
+    tooltipOptional: 'Inserisci la diagonale misurata per verificar i 90 gradi',
     tooltipPresets: 'Regola 3-4-5 in diverse scale',
     statusPerfect: 'Angolo di 90 gradi perfetto',
     statusAcceptable: 'Scostamento accettabile',

package/src/tool/pythagoreanRightAngleCalculator/i18n/ja.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: '単位',
     btnUnitInches: 'インチ',
     btnUnitFeet: 'フィート',
+    btnUnitCentimeters: 'センチメートル',
     labelSideA: '辺 A',
     labelSideB: '辺 B',
     labelMeasuredDiagonal: '測定した対角線（任意）',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'クイックプリセット',
     unitInches: 'in',
     unitFeet: 'ft',
+    unitCentimeters: 'cm',
     tooltipOptional: '測定した対角線を入力して90度を確認します',
     tooltipPresets: '様々なスケールでの3-4-5の法則',
     statusPerfect: '完璧な90度の角度',

package/src/tool/pythagoreanRightAngleCalculator/i18n/nl.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Eenheid',
     btnUnitInches: 'inches',
     btnUnitFeet: 'feet',
+    btnUnitCentimeters: 'centimeters',
     labelSideA: 'Zijde A',
     labelSideB: 'Zijde B',
     labelMeasuredDiagonal: 'Gemeten diagonaal (optioneel)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Snelkeuzes',
     unitInches: 'in',
     unitFeet: 'ft',
+    unitCentimeters: 'cm',
     tooltipOptional: 'Voer je gemeten diagonaal in om de 90 graden hoek te controleren',
     tooltipPresets: '3-4-5-regel op verschillende schalen',
     statusPerfect: 'Perfecte 90 graden hoek',

package/src/tool/pythagoreanRightAngleCalculator/i18n/pl.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Jednostka',
     btnUnitInches: 'cale',
     btnUnitFeet: 'stopy',
+    btnUnitCentimeters: 'centymetry',
     labelSideA: 'Bok A',
     labelSideB: 'Bok B',
     labelMeasuredDiagonal: 'Zmierzona przekątna (opcjonalnie)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Szybkie ustawienia',
     unitInches: 'cal',
     unitFeet: 'st',
+    unitCentimeters: 'cm',
     tooltipOptional: 'Wprowadź zmierzoną przekątną, aby sprawdzić kąt 90 stopni',
     tooltipPresets: 'Zasada 3-4-5 w różnych skalach',
     statusPerfect: 'Idealny kąt 90 stopni',

package/src/tool/pythagoreanRightAngleCalculator/i18n/pt.ts

@@ -83,7 +83,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
     { type: 'title', text: 'O Teorema de Pitágoras na Prática', level: 2 },
-    { type: 'paragraph', html: 'Um ângulo perfeito de 90 graus é fundamental para uma construção de qualidade. As paredes devem ser perpendiculares, os alicerces devem estar no esquadro e as estruturas devem estar alinhadas. O teorema de Pitágoras fornece um método matematicamente garantido: a² + b² = c².' },
+    { type: 'paragraph', html: 'Um ângulo perfeito de 90 graus é fundamental para uma construção de qualidade. As paredes devem ser perpendiculares, os alicerces deben estar no esquadro e as estruturas deben estar alinhadas. O teorema de Pitágoras fornece um método matematicamente garantido: a² + b² = c².' },
     { type: 'title', text: 'Por que a regra 3-4-5 funciona', level: 3 },
     { type: 'paragraph', html: 'A regra 3-4-5 é o terno pitagórico mais simples. Quer meça em polegadas, pés ou qualquer outra unidade, lados de 3, 4 e 5 unidades garantem um ângulo de 90 graus. Isso foi provado matematicamente e testado na construção durante séculos.' },
     { type: 'title', text: 'Precisão sem ferramentas especializadas', level: 3 },
@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Unidade',
     btnUnitInches: 'polegadas',
     btnUnitFeet: 'pés',
+    btnUnitCentimeters: 'centímetros',
     labelSideA: 'Lado A',
     labelSideB: 'Lado B',
     labelMeasuredDiagonal: 'Diagonal medida (opcional)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Ajustes rápidos',
     unitInches: 'pol',
     unitFeet: 'pé',
+    unitCentimeters: 'cm',
     tooltipOptional: 'Insira a sua diagonal medida para verificar os 90 graus',
     tooltipPresets: 'Regra 3-4-5 em diferentes escalas',
     statusPerfect: 'Ângulo de 90 graus perfeito',

package/src/tool/pythagoreanRightAngleCalculator/i18n/ru.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Единица измерения',
     btnUnitInches: 'дюймы',
     btnUnitFeet: 'футы',
+    btnUnitCentimeters: 'сантиметры',
     labelSideA: 'Сторона А',
     labelSideB: 'Сторона Б',
     labelMeasuredDiagonal: 'Измеренная диагональ (опционально)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Быстрые настройки',
     unitInches: 'дюйм',
     unitFeet: 'фут',
+    unitCentimeters: 'см',
     tooltipOptional: 'Введите измеренную диагональ для проверки угла 90 градусов',
     tooltipPresets: 'Правило 3-4-5 в разных масштабах',
     statusPerfect: 'Идеальный угол 90 градусов',

package/src/tool/pythagoreanRightAngleCalculator/i18n/sv.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Enhet',
     btnUnitInches: 'tum',
     btnUnitFeet: 'fot',
+    btnUnitCentimeters: 'centimeter',
     labelSideA: 'Sida A',
     labelSideB: 'Sida B',
     labelMeasuredDiagonal: 'Uppmätt diagonal (valfritt)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Snabbval',
     unitInches: 'tum',
     unitFeet: 'fot',
+    unitCentimeters: 'cm',
     tooltipOptional: 'Ange din uppmätta diagonal för att kontrollera 90-graders vinkeln',
     tooltipPresets: '3-4-5-regeln i olika skalor',
     statusPerfect: 'Perfekt 90-graders vinkel',

package/src/tool/pythagoreanRightAngleCalculator/i18n/tr.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: 'Birim',
     btnUnitInches: 'inç',
     btnUnitFeet: 'fit',
+    btnUnitCentimeters: 'santimetre',
     labelSideA: 'A Kenarı',
     labelSideB: 'B Kenarı',
     labelMeasuredDiagonal: 'Ölçülen diyagonal (isteğe bağlı)',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: 'Hızlı ayarlar',
     unitInches: 'in',
     unitFeet: 'ft',
+    unitCentimeters: 'cm',
     tooltipOptional: '90 derecelik açıyı doğrulamak için ölçülen diyagonali girin',
     tooltipPresets: 'Farklı ölçeklerde 3-4-5 kuralı',
     statusPerfect: 'Mükemmel 90 derece açı',

package/src/tool/pythagoreanRightAngleCalculator/i18n/zh.ts

@@ -97,6 +97,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelUnitSelection: '单位',
     btnUnitInches: '英寸',
     btnUnitFeet: '英尺',
+    btnUnitCentimeters: '厘米',
     labelSideA: '边 A',
     labelSideB: '边 B',
     labelMeasuredDiagonal: '测量对角线（可选）',
@@ -110,6 +111,7 @@ export const content: ToolLocaleContent<PythagoreanRightAngleCalculatorUI> = {
     labelPresets: '快速预设',
     unitInches: 'in',
     unitFeet: 'ft',
+    unitCentimeters: 'cm',
     tooltipOptional: '输入测得的对角线以验证 90 度直角',
     tooltipPresets: '不同比例下的 3-4-5 法则',
     statusPerfect: '完美 90 度直角',

package/src/tool/pythagoreanRightAngleCalculator/logic.ts

@@ -33,16 +33,19 @@ function getStatusMessage(status: 'perfect' | 'acceptable' | 'warning' | 'error'
   return msgs[status];
 }
 
-function getCorrection(status: 'perfect' | 'acceptable' | 'warning' | 'error', params: { absDev: number; devDir: string; action: string; ui: Record<string, string> }): string {
-  if (status === 'perfect') return '';
+function getCorrection(status: 'perfect' | 'acceptable' | 'warning' | 'error', params: { absDev: number; devDir: string; action: string; unit: string; ui: Record<string, string> }): string {
   const fixStr = (val: number) => val.toFixed(1);
-  const { absDev, devDir, action, ui } = params;
-  if (status === 'acceptable') return `${action} the angle slightly. Diagonal is ${fixStr(absDev)} ${devDir}.`;
-  if (status === 'warning') return `${action} the angle. Diagonal is ${fixStr(absDev)} ${devDir}.`;
-  return `${ui.descCorrection || 'Correction'}: diagonal ${fixStr(absDev)} ${devDir} than ideal.`;
+  const { absDev, devDir, action, unit, ui } = params;
+  const corrections = {
+    perfect: '',
+    acceptable: `${action} the angle slightly. Diagonal is ${fixStr(absDev)}${unit} ${devDir}.`,
+    warning: `${action} the angle. Diagonal is ${fixStr(absDev)}${unit} ${devDir}.`,
+    error: `${ui.descCorrection || 'Correction'}: diagonal ${fixStr(absDev)}${unit} ${devDir} than ideal.`
+  };
+  return corrections[status];
 }
 
-function determineStatus(deviation: number, deviationPercent: number, ui: Record<string, string>): StatusResult {
+function determineStatus(deviation: number, deviationPercent: number, unit: string, ui: Record<string, string>): StatusResult {
   const absDev = Math.abs(deviation);
   const devDir = deviation > 0 ? (ui.descLarger || 'larger') : (ui.descSmaller || 'smaller');
   const action = deviation > 0 ? (ui.actionClose || 'Close') : (ui.actionOpen || 'Open');
@@ -51,41 +54,44 @@ function determineStatus(deviation: number, deviationPercent: number, ui: Record
   return {
     status,
     message: getStatusMessage(status, ui),
-    correction: getCorrection(status, { absDev, devDir, action, ui })
+    correction: getCorrection(status, { absDev, devDir, action, unit, ui })
   };
 }
 
+function createIdleResult(sideA: number, sideB: number): SquaringCalculation {
+  return { sideA, sideB, hypotenuse: 0, measuredDiagonal: null, deviation: null, deviationPercent: null, status: 'idle', message: '', correction: '' };
+}
+
+function createAcceptableResult(sideA: number, sideB: number, hypotenuse: number, ui: Record<string, string>): SquaringCalculation {
+  return { sideA, sideB, hypotenuse, measuredDiagonal: null, deviation: null, deviationPercent: null, status: 'acceptable', message: ui.msgIdealCalculated || 'Diagonal ideal calculated', correction: '' };
+}
+
+function validateInput(sideA: number, sideB: number): boolean {
+  return sideA > 0 && sideB > 0;
+}
+
+function calculateDeviation(measuredDiagonal: number, hypotenuse: number, unit: string, ui: Record<string, string>): Pick<SquaringCalculation, 'measuredDiagonal' | 'deviation' | 'deviationPercent' | 'status' | 'message' | 'correction'> {
+  const deviation = measuredDiagonal - hypotenuse;
+  const deviationPercent = (Math.abs(deviation) / hypotenuse) * 100;
+  const { status, message, correction } = determineStatus(deviation, deviationPercent, unit, ui);
+  return { measuredDiagonal, deviation, deviationPercent, status, message, correction };
+}
+
 export function calculateSquaring(
   sideA: number,
   sideB: number,
   measuredDiagonal: number | null = null,
-  ui: Record<string, string> = {}
+  options: { unit?: string; ui?: Record<string, string> } = {}
 ): SquaringCalculation {
-  const baseResult: Omit<SquaringCalculation, 'status' | 'message' | 'correction'> = {
-    sideA,
-    sideB,
-    hypotenuse: 0,
-    measuredDiagonal: null,
-    deviation: null,
-    deviationPercent: null
-  };
-
-  if (sideA <= 0 || sideB <= 0) {
-    return { ...baseResult, status: 'idle', message: '', correction: '' };
-  }
+  const unit = options.unit || '';
+  const ui = options.ui || {};
+  if (!validateInput(sideA, sideB)) return createIdleResult(sideA, sideB);
 
   const hypotenuse = Math.sqrt(sideA ** 2 + sideB ** 2);
-  baseResult.hypotenuse = hypotenuse;
-
-  if (!measuredDiagonal || measuredDiagonal <= 0) {
-    return { ...baseResult, status: 'acceptable', message: ui.msgIdealCalculated || 'Diagonal ideal calculated', correction: '' };
-  }
-
-  const deviation = measuredDiagonal - hypotenuse;
-  const deviationPercent = (Math.abs(deviation) / hypotenuse) * 100;
-  const { status, message, correction } = determineStatus(deviation, deviationPercent, ui);
+  if (!measuredDiagonal || measuredDiagonal <= 0) return createAcceptableResult(sideA, sideB, hypotenuse, ui);
 
-  return { ...baseResult, measuredDiagonal, deviation, deviationPercent, status, message, correction };
+  const deviation = calculateDeviation(measuredDiagonal, hypotenuse, unit, ui);
+  return { sideA, sideB, hypotenuse, ...deviation };
 }
 
 export const PRESET_RULES = [

package/src/tool/pythagoreanRightAngleCalculator/pythagorean-right-angle-calculator.css

@@ -146,12 +146,21 @@
   border-radius: 0.5rem;
   background: var(--prac-bg);
   color: var(--prac-neutral);
-  font-weight: 700;
   cursor: pointer;
-  font-size: 0.9rem;
   transition: all 200ms ease;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.prac-btn-icon {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.prac-btn-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .prac-btn:hover {